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,37 +35,39 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   return (
     <Panel>
       <HeaderText text="Shared Storage" />
-      {data?.file_systems &&
+      <Box className={classes.root}>
-        data.file_systems.map(
+        {data?.file_systems &&
-          (fs: AnvilSharedStorageFileSystem): JSX.Element => (
+          data.file_systems.map(
-            <InnerPanel key={fs.mount_point}>
+            (fs: AnvilSharedStorageFileSystem): JSX.Element => (
-              <PanelHeader>
+              <InnerPanel key={fs.mount_point}>
-                <Box display="flex" width="100%" className={classes.header}>
+                <PanelHeader>
-                  <Box>
+                  <Box display="flex" width="100%" className={classes.header}>
-                    <BodyText text={fs.mount_point} />
+                    <Box>
+                      <BodyText text={fs.mount_point} />
+                    </Box>
                   </Box>
-                </Box>
+                </PanelHeader>
-              </PanelHeader>
+                {fs?.nodes &&
-              {fs?.nodes &&
+                  fs.nodes.map(
-                fs.nodes.map(
+                    (
-                  (
+                      node: AnvilSharedStorageNode,
-                    node: AnvilSharedStorageNode,
+                      index: number,
-                    index: number,
+                    ): JSX.Element => (
-                  ): JSX.Element => (
+                      <SharedStorageNode
-                    <SharedStorageNode
+                        node={{
-                      node={{
+                          ...node,
-                        ...node,
+                          nodeInfo:
-                        nodeInfo:
+                            anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)]
-                          anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)]
+                              .nodes[index],
-                            .nodes[index],
+                        }}
-                      }}
+                        key={fs.nodes[index].free}
-                      key={fs.nodes[index].free}
+                      />
-                    />
+                    ),
-                  ),
+                  )}
-                )}
+              </InnerPanel>
-            </InnerPanel>
+            ),
-          ),
+          )}
-        )}
+      </Box>
     </Panel>
   );
 };