feat : useScreenSize for board size

src/pages/_app.tsx

@@ -4,8 +4,6 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import { AppProps } from "next/app";
 import Head from "next/head";
-// import "../../styles/global.css";
-// import "../../styles/index.css";
 import Layout from "@/sections/layout";
 
 export default function MyApp({ Component, pageProps }: AppProps) {

src/pages/database.tsx

@@ -152,9 +152,7 @@ export default function GameDatabase() {
       marginTop={6}
     >
       <Grid item container xs={12} justifyContent="center" alignItems="center">
-        <Grid item container justifyContent="center" sx={{ maxWidth: "250px" }}>
-          <LoadGameButton />
-        </Grid>
+        <LoadGameButton />
       </Grid>
 
       <Grid item container xs={12} justifyContent="center" alignItems="center">

src/pages/index.tsx

@@ -38,7 +38,7 @@ export default function GameReport() {
       rowGap={6}
       justifyContent="center"
       alignItems="start"
-      marginTop={1}
+      gap={6}
     >
       <Grid
         item
@@ -46,8 +46,7 @@ export default function GameReport() {
         justifyContent="center"
         alignItems="center"
         xs={12}
-        md={9}
-        lg={6}
+        md
       >
         <Board />
       </Grid>
@@ -55,11 +54,11 @@ export default function GameReport() {
       <Grid
         item
         container
-        paddingLeft={{ xs: 0, lg: 6 }}
+        marginTop={{ xs: 0, md: "2.5em" }}
         justifyContent="center"
         alignItems="center"
         xs={12}
-        lg={6}
+        md
       >
         <Grid
           container
@@ -76,7 +75,7 @@ export default function GameReport() {
             borderWidth: 2,
           }}
           padding={3}
-          gap={4}
+          gap={3}
         >
           <ReviewPanelHeader />