fix MainLayout

rskit1986 · May 6, 2023 · 3d884c0 · 3d884c0
1 parent 3d06656
commit 3d884c0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/src/components/MainLoadingScreen.tsx b/src/components/MainLoadingScreen.tsx
@@ -4,10 +4,11 @@ import CircularProgress from "@mui/material/CircularProgress";
 function MainLoadingScreen() {
   return (
     <Box
+      flexGrow={1}
       display="flex"
       justifyContent="center"
       alignItems="center"
-      sx={{ height: "100vh" }}
+      sx={{ height: "100%" }}
     >
       <CircularProgress sx={{ color: "white" }} />
     </Box>

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -1,4 +1,6 @@
 import { Outlet, useLocation } from "react-router-dom";
+import Box from "@mui/material/Box";
+
 import DetailModal from "src/components/DetailModal";
 import VideoPortalContainer from "src/components/VideoPortalContainer";
 import DetailModalProvider from "src/providers/DetailModalProvider";
@@ -9,7 +11,16 @@ import { MAIN_PATH } from "src/constant";
 export default function MainLayout() {
   const location = useLocation();
   return (
-    <>
+    <Box
+      sx={{
+        width: "100%",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: "background.default",
+        position: "relative",
+      }}
+    >
       <MainHeader />
       <DetailModalProvider>
         <DetailModal />
@@ -19,6 +30,6 @@ export default function MainLayout() {
         </PortalProvider>
       </DetailModalProvider>
       {location.pathname !== `/${MAIN_PATH.watch}` && <Footer />}
-    </>
+    </Box>
   );
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -6,7 +6,6 @@ import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { RouterProvider } from "react-router-dom";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import Box from "@mui/material/Box";
 
 import store from "./store";
 import { extendedApi } from "./store/slices/configuration";
@@ -23,19 +22,10 @@ root.render(
   <Provider store={store}>
     <React.StrictMode>
       <ThemeProvider theme={createTheme({ palette })}>
-        <Box
-          sx={{
-            width: "100%",
-            height: "100vh",
-            bgcolor: "background.default",
-            position: "relative",
-          }}
-        >
-          <RouterProvider
-            router={router}
-            fallbackElement={<MainLoadingScreen />}
-          />
-        </Box>
+        <RouterProvider
+          router={router}
+          fallbackElement={<MainLoadingScreen />}
+        />
       </ThemeProvider>
     </React.StrictMode>
   </Provider>