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,17 +33,15 @@ const Home = (): JSX.Element => {
 
   return (
     <>
-      <Header />
       <AnvilProvider>
+        <Header />
+        {data?.anvils && (
           <Box
             display="flex"
             flexDirection="row"
             width="100%"
             justifyContent="space-between"
-          alignContent="flex-start"
           >
-          {data?.anvils && (
-            <>
             <Box p={1} className={classes.child}>
               <Anvils list={data} />
               <Nodes anvil={data.anvils} />
@@ -60,9 +57,8 @@ const Home = (): JSX.Element => {
               <CPU />
               <Memory />
             </Box>
-            </>
-          )}
           </Box>
+        )}
       </AnvilProvider>
     </>
   );