Improve layout for large devices

* Use four cards per row in collection summaries * Align maximum width of footer with maximum width of main content * Remove maximum width from Portfolio Builder content Signed-off-by: Marvin A. Ruder <signed@mruder.dev>
marvinruder · Feb 29, 2024 · aff6bd7 · aff6bd7
1 parent ce3d207
commit aff6bd7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/packages/frontend/src/components/etc/Footer.tsx b/packages/frontend/src/components/etc/Footer.tsx
@@ -1,17 +1,20 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
-import { Container, IconButton, Typography } from "@mui/material";
+import type { BoxProps } from "@mui/material";
+import { Box, Container, IconButton, Typography } from "@mui/material";
 
-export const Footer = () => {
-  return (
-    <Container
+export const Footer = (props: FooterProps) => (
+  <Container maxWidth={false}>
+    <Box
       sx={{
+        m: "auto",
         mt: 2,
         pb: { xs: 4, md: 2 },
         display: { xs: "block", md: "flex" },
         alignItems: "center",
         justifyContent: "space-between",
         textAlign: { xs: "center", md: "left" },
       }}
+      maxWidth={props.maxWidth}
     >
       <Typography sx={{ ml: { md: "auto" }, mr: { md: 0.5 }, pt: { xs: 2, md: 0 } }} variant="subtitle1">
         Something&nbsp;missing&nbsp;or&nbsp;not&nbsp;working&nbsp;correctly? Report&nbsp;it&nbsp;on&nbsp;GitHub:
@@ -22,6 +25,13 @@ export const Footer = () => {
       <Typography sx={{ pt: { xs: 2, md: 0 }, order: -1 }} variant="subtitle1">
         &copy; 2022–2024 Marvin A. Ruder
       </Typography>
-    </Container>
-  );
-};
+    </Box>
+  </Container>
+);
+
+interface FooterProps {
+  /**
+   * The maximum width of the container.
+   */
+  maxWidth?: BoxProps["maxWidth"];
+}
diff --git a/packages/frontend/src/content/modules/PortfolioBuilder/PortfolioBuilder.tsx b/packages/frontend/src/content/modules/PortfolioBuilder/PortfolioBuilder.tsx
@@ -1090,7 +1090,7 @@ const PortfolioBuilderModule = (): JSX.Element => {
         <PortfolioBuilderHeader />
       </HeaderWrapper>
       <Container maxWidth={false}>
-        <Card sx={{ m: "auto", mb: 2, px: 2, pb: 2, maxWidth: "lg" }}>
+        <Card sx={{ m: "auto", mb: 2, px: 2, pb: 2 }}>
           <Stepper
             activeStep={activeStep}
             sx={{ background: "none" }}

diff --git a/packages/frontend/src/content/modules/PortfolioSummary/PortfolioSummary.tsx b/packages/frontend/src/content/modules/PortfolioSummary/PortfolioSummary.tsx
@@ -46,7 +46,7 @@ const PortfolioSummaryModule = (): JSX.Element => {
           {portfolioSummariesFinal ? (
             portfolioSummaries.length ? (
               portfolioSummaries.map((portfolioSummary) => (
-                <Grid item xs={12} sm={6} md={4} key={portfolioSummary.id}>
+                <Grid item xs={12} sm={6} md={4} xl={3} key={portfolioSummary.id}>
                   <PortfolioCard portfolio={portfolioSummary} getPortfolios={getPortfolios} />
                 </Grid>
               ))

diff --git a/packages/frontend/src/content/modules/Stock/Stock.tsx b/packages/frontend/src/content/modules/Stock/Stock.tsx
@@ -58,7 +58,7 @@ const StockModule = (): JSX.Element => {
           <StockDetails stock={stock} />
         </Card>
       </Container>
-      <Footer />
+      <Footer maxWidth="lg" />
     </>
   );
 };

diff --git a/packages/frontend/src/content/modules/WatchlistSummary/WatchlistSummary.tsx b/packages/frontend/src/content/modules/WatchlistSummary/WatchlistSummary.tsx
@@ -46,7 +46,7 @@ const WatchlistSummaryModule = (): JSX.Element => {
           {watchlistSummariesFinal ? (
             watchlistSummaries.length ? (
               watchlistSummaries.map((watchlistSummary) => (
-                <Grid item xs={12} sm={6} md={4} key={watchlistSummary.id}>
+                <Grid item xs={12} sm={6} md={4} xl={3} key={watchlistSummary.id}>
                   <WatchlistCard watchlist={watchlistSummary} getWatchlists={getWatchlists} />
                 </Grid>
               ))