refactor(front-end): use 2 columns for wider layout and display server at the top

striker-ui/pages/index.tsx

@@ -11,13 +11,15 @@ import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import Servers from '../components/Servers';
 import Header from '../components/Header';
 import AnvilProvider from '../components/AnvilContext';
+import { LARGE_MOBILE_BREAKPOINT } from '../lib/consts/DEFAULT_THEME';
+import useWindowDimensions from '../hooks/useWindowDimenions';
 
 const useStyles = makeStyles((theme) => ({
   child: {
     width: '22%',
     height: '100%',
-    [theme.breakpoints.down('lg')]: {
+    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
-      width: '25%',
+      width: '50%',
     },
     [theme.breakpoints.down('md')]: {
       width: '100%',
@@ -26,9 +28,6 @@ const useStyles = makeStyles((theme) => ({
   server: {
     width: '35%',
     height: '100%',
-    [theme.breakpoints.down('lg')]: {
-      width: '25%',
-    },
     [theme.breakpoints.down('md')]: {
       width: '100%',
     },
@@ -46,6 +45,7 @@ const useStyles = makeStyles((theme) => ({
 
 const Home = (): JSX.Element => {
   const classes = useStyles();
+  const width = useWindowDimensions();
 
   const { data } = PeriodicFetch<AnvilList>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
@@ -55,25 +55,41 @@ const Home = (): JSX.Element => {
     <>
       <AnvilProvider>
         <Header />
-        {data?.anvils && (
+        {data?.anvils &&
-          <Box className={classes.container}>
+          width &&
-            <Box className={classes.child}>
+          (width > LARGE_MOBILE_BREAKPOINT ? (
-              <Anvils list={data} />
+            <Box className={classes.container}>
-              <Hosts anvil={data.anvils} />
+              <Box className={classes.child}>
-            </Box>
+                <Anvils list={data} />
-            <Box className={classes.server}>
+                <Hosts anvil={data.anvils} />
-              <Servers anvil={data.anvils} />
+              </Box>
-            </Box>
+              <Box className={classes.server}>
-            <Box className={classes.child}>
+                <Servers anvil={data.anvils} />
-              <SharedStorage />
+              </Box>
+              <Box className={classes.child}>
+                <SharedStorage />
+              </Box>
+              <Box className={classes.child}>
+                <Network />
+                <CPU />
+                <Memory />
+              </Box>
             </Box>
-            <Box className={classes.child}>
+          ) : (
-              <Network />
+            <Box className={classes.container}>
-              <CPU />
+              <Box className={classes.child}>
-              <Memory />
+                <Servers anvil={data.anvils} />
+                <Anvils list={data} />
+                <Hosts anvil={data.anvils} />
+              </Box>
+              <Box className={classes.child}>
+                <Network />
+                <SharedStorage />
+                <CPU />
+                <Memory />
+              </Box>
             </Box>
-          </Box>
+          ))}
-        )}
       </AnvilProvider>
     </>
   );