Style: full screen fill

components/Title/index.tsx

@@ -3,7 +3,7 @@ import { Box, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 const Title: React.FC = () => {
     const theme = useTheme<Theme>();
-    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
     return (
         <Box
@@ -35,6 +35,7 @@ const Title: React.FC = () => {
                         [theme.breakpoints.down("sm")]: {
                             fontSize: "2.4rem",
                         },
+                        mb: 1,
                     }}
                 >
                     {"Ungine"}

pages/index.tsx

@@ -1,44 +1,39 @@
-import { Box, Container, useTheme } from "@mui/material";
+import { Box, Container } from "@mui/material";
 import React from "react";
 import Title from "~/components/Title";
 import Footer from "~/components/Footer";
 import Background from "~/components/Background";
 import { NextPage } from "next";
 
-const Home: NextPage = () => {
-    const theme = useTheme();
-
-    return (
-        <Container
-            maxWidth={"lg"}
+const Home: NextPage = () => (
+    <Container
+        fixed
+        maxWidth={"lg"}
+        sx={{
+            height: "100vh",
+            maxHeight: "-webkit-fill-available",
+            width: "100vw",
+            paddingY: "5%",
+            display: "flex",
+            flexDirection: "column",
+        }}
+        className={"container"}
+    >
+        <Box
+            component={"main"}
             sx={{
-                height: "100vh",
-                width: "100vw",
-                margin: 0,
-                paddingTop: "5%",
-                paddingBottom: "5%",
-                overflow: "hidden",
-                boxSizing: "border-box",
+                zIndex: 1000,
                 display: "flex",
                 flexDirection: "column",
+                justifyContent: "center",
+                flexGrow: 1,
             }}
         >
-            <Box
-                component={"main"}
-                sx={{
-                    zIndex: 1000,
-                    height: `calc(100% - ${theme.spacing(4)})`,
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                }}
-            >
-                <Title />
-            </Box>
-            <Footer />
-            <Background />
-        </Container>
-    );
-};
+            <Title />
+        </Box>
+        <Footer />
+        <Background />
+    </Container>
+);
 
 export default Home;