From eaff77afd450a16a08d0dec01fbe601de0700fbc Mon Sep 17 00:00:00 2001
From: Fredrik Oseberg <fredrik.no@gmail.com>
Date: Wed, 10 Aug 2022 13:15:33 +0200
Subject: [PATCH] fix: add widths for viritualized table

---
 .../PlaygroundResultsTable.tsx                | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
index f9c851d916..e3027403d8 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
@@ -1,15 +1,14 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import {SortingRule, useFlexLayout, useGlobalFilter, useSortBy, useTable} from 'react-table';
-
 import {
-    SortableTableHeader,
-    Table,
-    TableBody,
-    TableCell,
-    TablePlaceholder,
-    TableRow, VirtualizedTable,
-} from 'component/common/Table';
+    SortingRule,
+    useFlexLayout,
+    useGlobalFilter,
+    useSortBy,
+    useTable,
+} from 'react-table';
+
+import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { sortTypes } from 'utils/sortTypes';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
@@ -27,8 +26,8 @@ import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import useLoading from 'hooks/useLoading';
 import { VariantCell } from './VariantCell/VariantCell';
 import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
-import {PageHeader} from "../../../common/PageHeader/PageHeader";
-import {PageContent} from "../../../common/PageContent/PageContent";
+import { PageHeader } from '../../../common/PageHeader/PageHeader';
+import { PageContent } from '../../../common/PageContent/PageContent';
 
 const defaultSort: SortingRule<string> = { id: 'name' };
 const { value, setValue } = createLocalStorage(
@@ -88,7 +87,7 @@ export const PlaygroundResultsTable = ({
                 sortType: 'alphanumeric',
                 filterName: 'variant',
                 searchable: true,
-                width: 200,
+                maxWidth: 200,
                 Cell: ({
                     value,
                     row: {
@@ -112,10 +111,12 @@ export const PlaygroundResultsTable = ({
                     <FeatureStatusCell feature={row.original} />
                 ),
                 sortType: 'boolean',
+                maxWidth: 100,
                 sortInverted: true,
             },
             {
                 Header: '',
+                maxWidth: 70,
                 id: 'info',
                 Cell: ({ row }: any) => (
                     <FeatureResultInfoPopoverCell
@@ -217,8 +218,6 @@ export const PlaygroundResultsTable = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change
     }, [loading, sortBy, searchValue]);
 
-
-
     return (
         <PageContent
             isLoading={loading}
@@ -240,7 +239,6 @@ export const PlaygroundResultsTable = ({
                 />
             }
         >
-
             <ConditionallyRender
                 condition={!loading && !data}
                 show={() => (
@@ -252,7 +250,9 @@ export const PlaygroundResultsTable = ({
                 )}
                 elseShow={() => (
                     <Box ref={ref}>
-                        <SearchHighlightProvider value={getSearchText(searchValue)}>
+                        <SearchHighlightProvider
+                            value={getSearchText(searchValue)}
+                        >
                             <VirtualizedTable
                                 rows={rows}
                                 headerGroups={headerGroups}