SSDM-12250 : Table Widget : sticky first column - try to avoid absolute...

SSDM-12250 : Table Widget : sticky first column - try to avoid absolute elements with hardcoded heights

openbis_ng_ui/src/js/components/common/grid/Grid.jsx

@@ -21,6 +21,7 @@ import logger from '@src/js/common/logger.js'
 
 const styles = theme => ({
   container: {
+    minWidth: '800px',
     height: '100%'
   },
   loadingContainer: {
@@ -44,7 +45,6 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.paper
   },
   titleCell: {
-    height: '46px',
     border: 0
   },
   titleContent: {
@@ -54,9 +54,7 @@ const styles = theme => ({
     paddingTop: theme.spacing(1),
     paddingBottom: 0
   },
-  pagingAndConfigsAndExportsCell: {
-    height: '46px'
-  },
+  pagingAndConfigsAndExportsCell: {},
   pagingAndConfigsAndExportsContent: {
     display: 'flex'
   }

openbis_ng_ui/src/js/components/common/grid/GridFilters.jsx

@@ -33,12 +33,11 @@ const styles = theme => ({
       zIndex: 100
     },
     '$multiselectable &$firstCell': {
-      left: '44px'
+      left: '48px'
     }
   },
   globalFilterCell: {
-    backgroundColor: 'inherit',
-    height: '62px'
+    backgroundColor: 'inherit'
   },
   globalFilterContent: {
     paddingTop: theme.spacing(1),

openbis_ng_ui/src/js/components/common/grid/GridHeaders.jsx

@@ -10,13 +10,15 @@ import logger from '@src/js/common/logger.js'
 
 const styles = theme => ({
   multiselectable: {},
+  multiselectContainer: {
+    width: '32px'
+  },
   multiselect: {
     backgroundColor: theme.palette.background.primary,
     paddingTop: theme.spacing(1),
     paddingBottom: theme.spacing(1),
     paddingLeft: theme.spacing(2),
     paddingRight: 0,
-    width: '30px',
     position: 'sticky',
     left: 0,
     zIndex: 100
@@ -29,7 +31,7 @@ const styles = theme => ({
       zIndex: 100
     },
     '$multiselectable &$firstHeader': {
-      left: '44px'
+      left: '48px'
     }
   },
   firstHeader: {}
@@ -109,11 +111,13 @@ class GridHeaders extends React.PureComponent {
 
       return (
         <TableCell classes={{ root: classes.multiselect }}>
-          <CheckboxField
-            value={value}
-            indeterminate={indeterminate}
-            onChange={this.handleMultiselectAllRowsChange}
-          />
+          <div className={classes.multiselectContainer}>
+            <CheckboxField
+              value={value}
+              indeterminate={indeterminate}
+              onChange={this.handleMultiselectAllRowsChange}
+            />
+          </div>
         </TableCell>
       )
     } else {

openbis_ng_ui/src/js/components/common/grid/GridRow.jsx

@@ -48,7 +48,7 @@ const styles = theme => ({
       zIndex: 100
     },
     '$multiselectable &$firstCell': {
-      left: '44px'
+      left: '48px'
     }
   },
   firstCell: {}

openbis_ng_ui/src/js/components/common/grid/GridRowFullWidth.jsx

@@ -10,10 +10,12 @@ const styles = () => ({
     position: 'sticky',
     left: 0
   },
+  contentWrapper: {
+    width: 0,
+    overflow: 'visible'
+  },
   content: {
-    position: 'absolute',
-    top: 0,
-    whiteSpace: 'nowrap'
+    width: '750px'
   },
   remainingCell: {
     padding: 0
@@ -41,8 +43,10 @@ class GridRowFullWidth extends React.PureComponent {
             root: `${classes.stickyCell} ${styles.cell}`
           }}
         >
-          <div className={`${classes.content} ${styles.content}`}>
-            {children}
+          <div className={classes.contentWrapper}>
+            <div className={`${classes.content} ${styles.content}`}>
+              {children}
+            </div>
           </div>
         </TableCell>
         {columns.length > 1 && (

openbis_ng_ui/src/js/components/common/grid/GridSelectionInfo.jsx

@@ -7,12 +7,12 @@ import messages from '@src/js/common/messages.js'
 import logger from '@src/js/common/logger.js'
 
 const styles = theme => ({
-  cell: {
-    height: '46px'
-  },
+  cell: {},
   content: {
     paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
     paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
     display: 'flex',
     alignItems: 'center'
   },