[WMS-55] Review comments

src/components/AllocationManager/AllocationManager.jsx

@@ -24,6 +24,7 @@ const AllocationManager = props => {
         padding: '12px',
         borderRadius: '4px'
       })}
+      className="h-100 d-flex flex-column"
     >
       <Typography gutterBottom variant={variant || 'h6'} component={component || 'div'}>
         {title}

src/components/MDTransferList/index.js

@@ -36,6 +36,10 @@ const useStyles = makeStyles({
     '& .MuiCheckbox-root': {
       paddingLeft: '0px'
     }
+  },
+  maxHeight: {
+    maxHeight: '20rem',
+    overflow: 'auto'
   }
 });
 
@@ -106,7 +110,7 @@ export default function TransferList({list, initlist, matchProp, onChange}) {
   };
 
   const customList = items => (
-    <List component="div" role="list">
+    <List component="div" role="list" className={classes.maxHeight}>
       {items.map((item, key) => {
         const value = item.name;
         const labelId = `transfer-list-item-${value}-label`;
@@ -137,7 +141,7 @@ export default function TransferList({list, initlist, matchProp, onChange}) {
   );
 
   return (
-    <Grid container>
+    <Grid container className="flex-fill">
       <Grid item md={5} className={classes.boxStyling}>
         <Typography gutterBottom variant="caption" component="div">
           Unassigned

src/components/Toggles/Toggles.jsx

@@ -17,11 +17,15 @@ const useStyles = makeStyles(() => ({
     '& .MuiSwitch-root': {
       margin: '0'
     }
+  },
+  maxHeight: {
+    maxHeight: '20rem',
+    overflow: 'auto'
   }
 }));
 
 const Toggles = props => {
-  const {boxSx, inittoggles, md, onChange, title, toggles, typoComponent, typoSx, typoVariant, xs} = props;
+  const {boxSx, gridStyleOverride, inittoggles, md, onChange, title, toggles, typoComponent, typoSx, typoVariant, xs} = props;
   const [toggleState, updateToggleState] = useState({});
   const classes = useStyles();
 
@@ -49,19 +53,20 @@ const Toggles = props => {
     </MDBox>;
   });
 
-  return <Grid item id='c-Toggles' xs={xs || 12} md={md || 3} >
+  return <Grid item className='c-Toggles' xs={xs || 12} md={md || 6} sx={gridStyleOverride}>
     <MDBox sx={boxSx || {backgroundColor: '#fff', border: '1px solid #c2c2c2', borderTop: '7px solid #007aff', borderRadius: '4px'}}>
       <Typography gutterBottom variant={typoVariant || 'h6'} component={typoComponent || 'div'}
         sx={typoSx || {borderBottom: '1px solid #c2c2c2', padding: '10px 20px', marginBottom: '20px'}}>
         {title || 'Title'}
       </Typography>
-      <Box sx={{ padding: ' 0px 20px' }}>{toggles && switchRenders(toggles)}</Box>
+      <Box sx={{ padding: ' 0px 20px' }} className={classes.maxHeight}>{toggles && switchRenders(toggles)}</Box>
     </MDBox>
   </Grid>;
 };
 
 Toggles.propTypes = {
   boxSx: PropTypes.object,
+  gridStyleOverride: PropTypes.object,
   inittoggles: PropTypes.string,
   md: PropTypes.number,
   onChange: PropTypes.func,

src/pages/createEditUser/index.js

@@ -474,9 +474,10 @@ function CreateEditUser(props) {
             onChange={(val) => formik.handleChange('inventories')(val)}
           />
         </Grid>
-        <Grid container spacing={2} sx={{ marginTop: '12px', paddingLeft: '2rem' }}>
+        <Grid container spacing={4} sx={{ marginTop: '12px'}}>
           <Toggles
             name="actions"
+            gridStyleOverride={{ paddingLeft: '4rem !important' }}
             title="Actions"
             toggles={actions}
             inittoggles={formik.values.actions}
@@ -484,6 +485,7 @@ function CreateEditUser(props) {
           />
           <Toggles
             name="visibilities"
+            gridStyleOverride={{ paddingRight: '2rem' }}
             title="Application"
             toggles={permissions}
             inittoggles={formik.values.visibilities}