Fix safari and firefox table visibility

Author: masiulis

.github/workflows/test.yaml

@@ -18,7 +18,7 @@ jobs:
         run: npm ci
       - run: npm run lint
       - run: npm run ts
-      - run: npm run test
+      - run: npm run test:unit
 
   e2e-tests:
     timeout-minutes: 60

package.json

@@ -12,7 +12,9 @@
   ],
   "scripts": {
     "start": "storybook dev -p 6006",
-    "test": "jest",
+    "test:unit": "jest",
+    "test:e2e": "npx playwright test",
+    "test:chromatic": "npx chromatic ",
     "ts": "tsc",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",

src/steps/SelectHeaderStep/SelectHeaderStep.tsx

@@ -32,9 +32,7 @@ export const SelectHeaderStep = ({ data, onContinue }: SelectHeaderProps) => {
     <>
       <ModalBody pb={0}>
         <Heading {...styles.heading}>{translations.selectHeaderStep.title}</Heading>
-        <Box h={0} flexGrow={1}>
-          <SelectHeaderTable data={data} selectedRows={selectedRows} setSelectedRows={setSelectedRows} />
-        </Box>
+        <SelectHeaderTable data={data} selectedRows={selectedRows} setSelectedRows={setSelectedRows} />
       </ModalBody>
       <ContinueButton
         onContinue={handleContinue}

src/steps/ValidationStep/ValidationStep.tsx

@@ -133,25 +133,23 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
             </Switch>
           </Box>
         </Box>
-        <Box h={0} flexGrow={1}>
-          <Table
-            rowKeyGetter={rowKeyGetter}
-            rows={tableData}
-            onRowsChange={updateRow}
-            columns={columns}
-            selectedRows={selectedRows}
-            onSelectedRowsChange={setSelectedRows}
-            components={{
-              noRowsFallback: (
-                <Box display="flex" justifyContent="center" gridColumn="1/-1" mt="32px">
-                  {filterByErrors
-                    ? translations.validationStep.noRowsMessageWhenFiltered
-                    : translations.validationStep.noRowsMessage}
-                </Box>
-              ),
-            }}
-          />
-        </Box>
+        <Table
+          rowKeyGetter={rowKeyGetter}
+          rows={tableData}
+          onRowsChange={updateRow}
+          columns={columns}
+          selectedRows={selectedRows}
+          onSelectedRowsChange={setSelectedRows}
+          components={{
+            noRowsFallback: (
+              <Box display="flex" justifyContent="center" gridColumn="1/-1" mt="32px">
+                {filterByErrors
+                  ? translations.validationStep.noRowsMessageWhenFiltered
+                  : translations.validationStep.noRowsMessage}
+              </Box>
+            ),
+          }}
+        />
       </ModalBody>
       <ContinueButton onContinue={onContinue} title={translations.validationStep.nextButtonTitle} />
     </>

src/theme.ts

@@ -361,6 +361,7 @@ export const themeOverrides = {
         border: "none",
         borderTop: "1px solid var(--rdg-border-color)",
         blockSize: "100%",
+        flex: "1",
 
         // we have to use vars here because chakra does not autotransform unknown props
         "--rdg-row-height": "35px",