refactor: set scrolling depending on screen size

striker-ui/components/Anvils/AnvilList.tsx

@@ -13,11 +13,15 @@ import Anvil from './Anvil';
 import { AnvilContext } from '../AnvilContext';
 import sortAnvils from './sortAnvils';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
     overflow: 'auto',
     height: '30vh',
+    [theme.breakpoints.down('md')]: {
+      height: '100%',
+      overflow: 'hidden',
+    },
   },
   divider: {
     background: DIVIDER,
@@ -67,7 +71,7 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
   const classes = useStyles();
 
   useEffect(() => {
-    setAnvilUuid(sortAnvils(list)[0].anvil_uuid);
+    if (uuid === '') setAnvilUuid(sortAnvils(list)[0].anvil_uuid);
   }, [uuid, list, setAnvilUuid]);
 
   return (

striker-ui/components/Network.tsx

@@ -9,11 +9,15 @@ import { BLUE, PURPLE_OFF, DIVIDER } from '../lib/consts/DEFAULT_THEME';
 import processNetworkData from './processNetwork';
 import { AnvilContext } from './AnvilContext';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   container: {
     width: '100%',
     overflow: 'auto',
     height: '30vh',
+    [theme.breakpoints.down('md')]: {
+      height: '100%',
+      overflow: 'hidden',
+    },
   },
   root: {
     paddingTop: '10px',

striker-ui/components/Servers.tsx

@@ -16,12 +16,15 @@ import {
 import { AnvilContext } from './AnvilContext';
 import serverState from '../lib/consts/SERVERS';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
     overflow: 'auto',
+    height: '80vh',
+    [theme.breakpoints.down('md')]: {
       height: '100%',
     },
+  },
   divider: {
     background: DIVIDER,
   },
@@ -79,11 +82,8 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   return (
     <Panel>
       <HeaderText text="Servers" />
-      <List
-        component="nav"
-        className={classes.root}
-        aria-label="mailbox folders"
-      >
+      <Box className={classes.root}>
+        <List component="nav">
           {data &&
             data.servers.map((server: AnvilServer) => {
               return (
@@ -134,6 +134,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
               );
             })}
         </List>
+      </Box>
     </Panel>
   );
 };