Refactor Root component layout to ensure Outlet occupies available sp…

…ace and set minHeight to 100dvh to avoid footer layout shift when the outlet finish loading
CodeHive-Solutions · Nov 27, 2024 · 670033a · 670033a
1 parent 9fe3f7b
commit 670033a
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/frontend/src/components/layout/root.jsx b/frontend/src/components/layout/root.jsx
@@ -1,24 +1,26 @@
-// Libraries
 import { Outlet } from 'react-router';
-
-// Custom Components
 import NavBar from '@components/common/NavBar';
 import Footer from '@components/common/Footer';
-
-// MUI
 import Box from '@mui/material/Box';
 
 const Root = () => {
     return (
         <Box
             style={{
                 display: 'grid',
-                minHeight: '    ',
+                minHeight: '100dvh',
                 gridTemplateRows: 'auto 1fr auto',
             }}
         >
             <NavBar />
-            <Outlet />
+            {/* Ensure the Outlet occupies at least the available space */}
+            <Box
+                style={{
+                    minHeight: '100vh',
+                }}
+            >
+                <Outlet />
+            </Box>
             <Footer />
         </Box>
     );