Merge pull request #83 from kreivi/fix/layout-overflow

Fixed layout overflow issues
kreivi · Aug 6, 2023 · 199e015 · 199e015
2 parents e1b5829 + 7f6ef0f
commit 199e015
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -1,4 +1,5 @@
-import { Container, Box, Grid } from "@mui/material";
+import { Container, Box, Grid, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/styles";
 import React from "react";
 
 import Header from "../Header";
@@ -18,6 +19,8 @@ export type LayoutProps = {
  * @returns Layout element
  */
 const Layout: React.FC<LayoutProps> = ({ main, aside }: LayoutProps) => {
+  const theme = useTheme();
+  const enableAside = useMediaQuery(theme.breakpoints.up("md"));
   return (
     <Box
       sx={{
@@ -34,12 +37,21 @@ const Layout: React.FC<LayoutProps> = ({ main, aside }: LayoutProps) => {
           marginBottom: 2,
         }}
       >
-        <Grid container direction="row">
-          <Grid xs={10}>
-            <Box component="main" sx={{ marginX: 2}}>{main}</Box>
+        <Grid container direction={enableAside ? "row" : "column-reverse"}>
+          <Grid xs={enableAside ? 10 : 12}>
+            <Box component="main" sx={{ marginX: 2 }}>
+              {main}
+            </Box>
           </Grid>
-          <Grid xs={2}>
-            <Box component="aside">{aside}</Box>
+          <Grid xs={enableAside ? 2 : 12}>
+            <Box
+              sx={{
+                marginX: enableAside ? 0 : 2,
+              }}
+              component="aside"
+            >
+              {aside}
+            </Box>
           </Grid>
         </Grid>
       </Container>

diff --git a/src/components/Social/index.tsx b/src/components/Social/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 
 import LinkedIn from "./linkedin";
 import GitHub from "./github";
@@ -13,19 +13,29 @@ import YouTube from "./youtube";
  */
 const Social: React.FC<{}> = () => {
   return (
-    <Box
+    <Grid
+      container
       sx={{
-        display: "flex",
         justifyContent: "center",
         alignItems: "center",
       }}
     >
-      <LinkedIn />
-      <GitHub />
-      <Mastodon />
-      <Itch />
-      <YouTube />
-    </Box>
+      <Grid>
+        <LinkedIn />
+      </Grid>
+      <Grid>
+        <GitHub />
+      </Grid>
+      <Grid>
+        <Mastodon />
+      </Grid>
+      <Grid>
+        <Itch />
+      </Grid>
+      <Grid>
+        <YouTube />
+      </Grid>
+    </Grid>
   );
 };