fix safari table height

client/src/components/customTabList/CustomTabList.tsx

@@ -22,6 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginRight: theme.spacing(3),
   },
   tabPanel: {
+    flexBasis: 0,
     flexGrow: 1,
     marginTop: theme.spacing(2),
   },

client/src/components/grid/Table.tsx

@@ -17,10 +17,10 @@ import LoadingTable from './LoadingTable';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    // minHeight: '29vh',
     width: '100%',
     flexGrow: 1,
-    // flexBasis: 0,
+    /* set flex basis to make child item height 100% work on Safari */
+    flexBasis: 0,
 
     // change scrollbar style
     '&::-webkit-scrollbar': {

client/src/pages/collections/CreateFields.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexWrap: 'nowrap',
     alignItems: 'center',
-    // only Safari 14.1+ support flexbox gaps
+    // only Safari 14.1+ support flexbox gap
     // gap: '10px',
     width: '100%',
 
@@ -64,6 +64,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   iconBtn: {
     marginLeft: 0,
+
     padding: 0,
     width: '20px',
     height: '20px',

client/src/styles/common.css

@@ -21,6 +21,9 @@ fieldset {
 
 /* used for fill remaining height of page */
 .page-wrapper {
+  /* set flex basis to make child item height 100% work on Safari */
+  flex-basis: 0;
+
   flex-grow: 1;
   display: flex;
   flex-direction: column;