redesign app layout: replaced css grid with flexbox

Client/src/Layouts/HomeLayout/index.css

@@ -1,55 +1,36 @@
-.home-layout {
-  display: grid;
-  position: relative;
-  grid-template-areas:
-    "aside header"
-    "aside main";
-  grid-template-columns: var(--env-var-side-bar-width) auto;
-  grid-template-rows: var(--env-var-nav-bar-height) auto;
+#root:has(.home-layout) {
   background-color: var(--env-var-color-30);
+}
+
+.home-layout {
+  display: flex;
+  position: relative;
+  gap: var(--env-var-spacing-2);
   min-height: 100vh;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--env-var-spacing-2);
 }
 
 .home-layout aside {
-  grid-area: aside;
-  position: fixed;
-  top: 0;
-  height: 100%;
-  width: var(--env-var-side-bar-width);
+  position: sticky;
+  top: var(--env-var-spacing-2);
+  left: 0;
+
+  height: calc(100vh - var(--env-var-spacing-2) * 2);
+  max-width: var(--env-var-side-bar-width);
+  flex: 1;
+
+  border: 1px solid var(--color-border-0);
+  border-radius: var(--env-var-radius-1);
   background-color: var(--env-var-color-8);
-  border-right: 1px solid var(--color-border-0);
+
   padding: var(--env-var-spacing-1) var(--env-var-spacing-1-plus);
 }
-.home-layout header {
-  grid-area: header;
-  background-color: var(--env-var-color-30);
-}
+
 .home-layout > div {
-  height: 100%;
-  grid-area: main;
-  padding: var(--env-var-spacing-2) calc(var(--env-var-spacing-4) * 2);
-  padding-bottom: var(--env-var-spacing-4);
-  max-width: 100%;
-}
-.home-layout > div:not(:has([class*="fallback"])) {
-  max-width: 1500px;
-}
-
-@media (max-width: 600px) {
-  .home-layout {
-    grid-template-areas:
-      "header header"
-      "main main";
-    grid-template-columns: 1fr;
-    grid-template-rows: 64px auto;
-  }
-
-  aside {
-    display: none;
-    visibility: hidden;
-  }
-
-  .home-layout > div {
-    padding: var(--env-var-spacing-1);
-  }
+  min-height: calc(100vh - var(--env-var-spacing-2) * 2);
+  padding-top: var(--env-var-spacing-4);
+  width: 100%;
+  flex: 1;
 }

Client/src/Layouts/HomeLayout/index.jsx

@@ -1,4 +1,3 @@
-import NavBar from "../../Components/NavBar";
 import Sidebar from "../../Components/Sidebar";
 import { Outlet } from "react-router";
 import { Box } from "@mui/material";
@@ -9,7 +8,6 @@ const HomeLayout = () => {
   return (
     <Box className="home-layout">
       <Sidebar />
-      <NavBar />
       <Outlet />
     </Box>
   );

Client/src/Pages/Monitors/index.jsx

@@ -250,7 +250,10 @@ const Monitors = () => {
             justifyContent="space-between"
             alignItems="center"
           >
-            <Typography component="h1">
+            <Typography
+              component="h1"
+              sx={{ lineHeight: 1, alignSelf: "flex-end" }}
+            >
               Hello, {authState.user.firstName}
             </Typography>
             {monitorState.monitors?.length !== 0 && (
@@ -299,7 +302,8 @@ const Monitors = () => {
               </Stack>
               <Stack
                 gap={theme.gap.large}
-                p={theme.gap.xl}
+                p={theme.gap.lgplus}
+                flex={1}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}
                 backgroundColor={theme.palette.otherColors.white}

Client/src/Utils/Theme.js

@@ -96,9 +96,10 @@ const theme = createTheme({
     ml: "16px",
     mlplus: "20px",
     large: "24px",
+    lgplus: "32px",
     xl: "40px",
     xxl: "60px",
-    triplexl: "120px"
+    triplexl: "120px",
   },
   alert: {
     info: {