fix: add padding for better header display, and change overflow depending on screen size

striker-ui/components/Nodes/AnvilNode.tsx

@@ -1,4 +1,4 @@
-import { Box, List, Switch } from '@material-ui/core';
+import { Box, Switch } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { ClassNameMap } from '@material-ui/styles';
 
@@ -9,11 +9,15 @@ import PanelHeader from '../PanelHeader';
 import { BLUE, RED_ON, TEXT, PURPLE_OFF } from '../../lib/consts/DEFAULT_THEME';
 import nodeState from '../../lib/consts/NODES';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   root: {
-    width: '100%',
     overflow: 'auto',
     height: '30vh',
+    paddingLeft: '5px',
+    [theme.breakpoints.down('md')]: {
+      height: '100%',
+      overflow: 'hidden',
+    },
   },
   state: {
     paddingLeft: '10px',
@@ -76,7 +80,7 @@ const AnvilNode = ({
 }): JSX.Element => {
   const classes = useStyles();
   return (
-    <List component="nav" className={classes.root} aria-label="mailbox folders">
+    <Box className={classes.root}>
       {nodes &&
         nodes.map(
           (node): JSX.Element => {
@@ -136,7 +140,7 @@ const AnvilNode = ({
             );
           },
         )}
-    </List>
+    </Box>
   );
 };
 

striker-ui/components/SharedStorage.tsx

@@ -10,11 +10,19 @@ import PanelHeader from './PanelHeader';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { AnvilContext } from './AnvilContext';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   header: {
     paddingTop: '3px',
     paddingRight: '10px',
   },
+  root: {
+    overflow: 'auto',
+    height: '80vh',
+    paddingLeft: '5px',
+    [theme.breakpoints.down('md')]: {
+      height: '100%',
+    },
+  },
 }));
 
 const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
@@ -27,6 +35,7 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   return (
     <Panel>
       <HeaderText text="Shared Storage" />
+      <Box className={classes.root}>
         {data?.file_systems &&
           data.file_systems.map(
             (fs: AnvilSharedStorageFileSystem): JSX.Element => (
@@ -58,6 +67,7 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
               </InnerPanel>
             ),
           )}
+      </Box>
     </Panel>
   );
 };