fix: on resize Header and body of the tables are mismatched (#369)

Signed-off-by: Eugene Jahn <[email protected]>
flyteorg · Apr 10, 2022 · 5842753 · 5842753
1 parent 5f61ea5
commit 5842753
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/src/components/Executions/Tables/styles.ts b/src/components/Executions/Tables/styles.ts
@@ -105,8 +105,6 @@ export const useExecutionTableStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'row',
   },
   rowColumn: {
-    flexGrow: 0,
-    flexShrink: 0,
     marginRight: theme.spacing(1),
     minWidth: 0,
     paddingBottom: theme.spacing(1),

diff --git a/src/components/Tables/DataList.tsx b/src/components/Tables/DataList.tsx
@@ -12,7 +12,7 @@ import {
   List,
   ListRowRenderer,
 } from 'react-virtualized';
-import { headerGridHeight, tableGridPadding } from './constants';
+import { headerGridHeight, tableGridPadding, minListContainerHeight } from './constants';
 import { LoadMoreRowContent } from './LoadMoreRowContent';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -24,6 +24,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   listContainer: {
     display: 'flex',
     flexDirection: 'column',
+    // set minHeight to avoid AutoResizer setting height to 0
+    minHeight: theme.spacing(minListContainerHeight),
   },
   noRowsContent: {
     color: tablePlaceholderColor,

diff --git a/src/components/Tables/constants.ts b/src/components/Tables/constants.ts
@@ -1,3 +1,4 @@
 export const loadMoreRowGridHeight = 6;
 export const headerGridHeight = 6;
 export const tableGridPadding = 1;
+export const minListContainerHeight = 24;