fix: change the nesting of the components to fix problem with the AppBar

striker-ui/components/Header.tsx

@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme) =>
     },
     input: {
       height: '40px',
-      width: '500px',
+      width: '30vw',
       backgroundColor: theme.palette.secondary.main,
       borderRadius: '3px',
     },
@@ -28,20 +28,14 @@ const Header = (): JSX.Element => {
   const classes = useStyles();
   return (
     <AppBar position="static" className={classes.appBar}>
-      <Box
+      <Box display="flex" justifyContent="space-between" flexDirection="row">
-        display="flex"
+        <Box className={classes.barElement}>
-        flexDirection="row"
-        width="100%"
-        justifyContent="space-between"
-        alignContent="flex-start"
-      >
-        <Box p={1} className={classes.barElement}>
           <Image src="/pngs/logo.png" width="160" height="40" />
         </Box>
-        <Box p={1} className={classes.barElement}>
+        <Box className={classes.barElement}>
           <input className={classes.input} list="search-suggestions" />
         </Box>
-        <Box p={1} className={classes.barElement}>
+        <Box className={classes.barElement}>
           {ICONS.map(
             (icon): JSX.Element => (
               <Image

striker-ui/pages/index.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-import Header from '../components/Header';
 import Anvils from '../components/Anvils';
 import Nodes from '../components/Nodes';
 import CPU from '../components/CPU';
@@ -10,7 +9,7 @@ import Memory from '../components/Memory';
 import Network from '../components/Network';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import Servers from '../components/Servers';
-
+import Header from '../components/Header';
 import AnvilProvider from '../components/AnvilContext';
 
 const useStyles = makeStyles(() => ({
@@ -34,35 +33,32 @@ const Home = (): JSX.Element => {
 
   return (
     <>
-      <Header />
       <AnvilProvider>
-        <Box
+        <Header />
-          display="flex"
+        {data?.anvils && (
-          flexDirection="row"
+          <Box
-          width="100%"
+            display="flex"
-          justifyContent="space-between"
+            flexDirection="row"
-          alignContent="flex-start"
+            width="100%"
-        >
+            justifyContent="space-between"
-          {data?.anvils && (
+          >
-            <>
+            <Box p={1} className={classes.child}>
-              <Box p={1} className={classes.child}>
+              <Anvils list={data} />
-                <Anvils list={data} />
+              <Nodes anvil={data.anvils} />
-                <Nodes anvil={data.anvils} />
+            </Box>
-              </Box>
+            <Box p={1} className={classes.server}>
-              <Box p={1} className={classes.server}>
+              <Servers anvil={data.anvils} />
-                <Servers anvil={data.anvils} />
+            </Box>
-              </Box>
+            <Box p={1} className={classes.child}>
-              <Box p={1} className={classes.child}>
+              <SharedStorage anvil={data.anvils} />
-                <SharedStorage anvil={data.anvils} />
+            </Box>
-              </Box>
+            <Box p={1} className={classes.child}>
-              <Box p={1} className={classes.child}>
+              <Network />
-                <Network />
+              <CPU />
-                <CPU />
+              <Memory />
-                <Memory />
+            </Box>
-              </Box>
+          </Box>
-            </>
+        )}
-          )}
-        </Box>
       </AnvilProvider>
     </>
   );