diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index 048700db6..28b4dd0f8 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/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;
}
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index 007fb7d05..81cb2fd9c 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/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 (
-
);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index e56be39b2..5a37ecb49 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -250,7 +250,10 @@ const Monitors = () => {
justifyContent="space-between"
alignItems="center"
>
-
+
Hello, {authState.user.firstName}
{monitorState.monitors?.length !== 0 && (
@@ -299,7 +302,8 @@ const Monitors = () => {