wrap outlet in stack and update the layout styles

src/Components/Fallback/index.jsx

@@ -35,6 +35,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 			overflow="hidden"
 			sx={{
 				borderStyle: "dashed",
+				minHeight: "calc(100vh - var(--env-var-spacing-2) * 2)",
 			}}
 		>
 			<Stack

src/Components/Layouts/HomeLayout/index.css

@@ -1,7 +1,6 @@
 .home-layout {
 	position: relative;
 	min-height: 100vh;
-	/* max-width: 1400px; */
 	margin: 0 auto;
 	padding: 0;
 }
@@ -15,7 +14,7 @@
 
 .home-layout aside {
 	position: sticky;
-	top: 0;
+	top: var(--env-var-spacing-2);
 	left: 0;
 	height: 100vh;
 	max-width: var(--env-var-side-bar-width);
@@ -26,10 +25,9 @@
 	flex: 1;
 }
 
-.home-layout > :nth-child(2) {
+.home-content-wrapper {
 	padding: var(--env-var-spacing-2);
-	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
 	max-width: 1400px;
 	margin: 0 auto;
 	flex: 1;
-}
+}

src/Components/Layouts/HomeLayout/index.jsx

@@ -12,7 +12,9 @@ const HomeLayout = () => {
 			gap={14}
 		>
 			<Sidebar />
-			<Outlet />
+			<Stack className="home-content-wrapper">
+				<Outlet />
+			</Stack>
 		</Stack>
 	);
 };