fix(front-end): adjust padding and breakpoint when showing scrollbars

striker-ui/components/Anvils/AnvilList.tsx

@@ -1,7 +1,11 @@
 import { useContext, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { List, Box, Divider, ListItem } from '@material-ui/core';
-import { HOVER, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
+import {
+  HOVER,
+  DIVIDER,
+  LARGE_MOBILE_BREAKPOINT,
+} from '../../lib/consts/DEFAULT_THEME';
 import Anvil from './Anvil';
 import { AnvilContext } from '../AnvilContext';
 import sortAnvils from './sortAnvils';
@@ -12,7 +16,8 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     overflow: 'auto',
     height: '30vh',
-    [theme.breakpoints.down('md')]: {
+    paddingRight: '.3em',
+    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
       height: '100%',
       overflow: 'hidden',
     },

striker-ui/components/FileSystem/FileSystems.tsx

@@ -8,6 +8,7 @@ import SharedStorageHost from './FileSystemsHost';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import { AnvilContext } from '../AnvilContext';
 import Spinner from '../Spinner';
+import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
 
 const useStyles = makeStyles((theme) => ({
   header: {
@@ -18,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'auto',
     height: '78vh',
     paddingLeft: '.3em',
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
       height: '100%',
     },
   },

striker-ui/components/Hosts/AnvilHost.tsx

@@ -7,13 +7,15 @@ import Decorator, { Colours } from '../Decorator';
 import HOST_STATUS from '../../lib/consts/NODES';
 
 import putJSON from '../../lib/fetchers/putJSON';
+import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     overflow: 'auto',
     height: '28vh',
     paddingLeft: '.3em',
-    [theme.breakpoints.down('md')]: {
+    paddingRight: '.3em',
+    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
       height: '100%',
       overflow: 'hidden',
     },

striker-ui/components/Network/Network.tsx

@@ -4,7 +4,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Panel } from '../Panels';
 import { HeaderText, BodyText } from '../Text';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
-import { DIVIDER } from '../../lib/consts/DEFAULT_THEME';
+import {
+  DIVIDER,
+  LARGE_MOBILE_BREAKPOINT,
+} from '../../lib/consts/DEFAULT_THEME';
 import processNetworkData from './processNetwork';
 import { AnvilContext } from '../AnvilContext';
 import Decorator, { Colours } from '../Decorator';
@@ -15,7 +18,8 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     overflow: 'auto',
     height: '32vh',
-    [theme.breakpoints.down('md')]: {
+    paddingRight: '.3em',
+    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
       height: '100%',
       overflow: 'hidden',
     },

striker-ui/components/Servers.tsx

@@ -26,6 +26,7 @@ import {
   RED,
   GREY,
   BLACK,
+  LARGE_MOBILE_BREAKPOINT,
 } from '../lib/consts/DEFAULT_THEME';
 import { AnvilContext } from './AnvilContext';
 import serverState from '../lib/consts/SERVERS';
@@ -40,8 +41,10 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     overflow: 'auto',
     height: '78vh',
-    [theme.breakpoints.down('md')]: {
+    paddingRight: '.3em',
+    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
       height: '100%',
+      overflow: 'hidden',
     },
   },
   divider: {

striker-ui/components/SharedStorage/SharedStorage.tsx

@@ -8,6 +8,7 @@ import SharedStorageHost from './SharedStorageHost';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import { AnvilContext } from '../AnvilContext';
 import Spinner from '../Spinner';
+import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
 
 const useStyles = makeStyles((theme) => ({
   header: {
@@ -18,7 +19,8 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'auto',
     height: '78vh',
     paddingLeft: '.3em',
-    [theme.breakpoints.down('md')]: {
+    paddingRight: '.3em',
+    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
       height: '100%',
     },
   },