Improve layout for large devices (#1076)

* 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 * Pin footer content to bottom of screen * Fix `overflow` style Signed-off-by: Marvin A. Ruder <signed@mruder.dev>
marvinruder · Feb 29, 2024 · 4a7bf1d · 4a7bf1d
1 parent ce3d207
commit 4a7bf1d
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 31 deletions.
diff --git a/packages/frontend/src/components/etc/Footer.tsx b/packages/frontend/src/components/etc/Footer.tsx
@@ -1,27 +1,40 @@
 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
-      sx={{
-        mt: 2,
-        pb: { xs: 4, md: 2 },
-        display: { xs: "block", md: "flex" },
-        alignItems: "center",
-        justifyContent: "space-between",
-        textAlign: { xs: "center", md: "left" },
-      }}
-    >
-      <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:
-      </Typography>
-      <IconButton href="https://github.com/marvinruder/rating-tracker">
-        <GitHubIcon />
-      </IconButton>
-      <Typography sx={{ pt: { xs: 2, md: 0 }, order: -1 }} variant="subtitle1">
-        &copy; 2022–2024 Marvin A. Ruder
-      </Typography>
+export const Footer = (props: FooterProps) => (
+  <>
+    <Box sx={{ flexGrow: 1 }} />
+    <Container maxWidth={false}>
+      <Box
+        sx={{
+          m: "auto",
+          mt: 2,
+          pb: 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:
+        </Typography>
+        <IconButton href="https://github.com/marvinruder/rating-tracker">
+          <GitHubIcon />
+        </IconButton>
+        <Typography sx={{ pt: { xs: 2, md: 0 }, order: -1 }} variant="subtitle1">
+          &copy; 2022–2024 Marvin A. Ruder
+        </Typography>
+      </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
@@ -563,7 +563,7 @@ const PortfolioBuilderModule = (): JSX.Element => {
               <Divider />
               <Accordion slotProps={{ transition: { unmountOnExit: true } }}>
                 <AccordionSummary expandIcon={<ExpandMoreIcon />}>Select stocks manually</AccordionSummary>
-                <AccordionDetails sx={{ ".MuiDialogContent-root": { overflowY: "hidden" } }}>
+                <AccordionDetails sx={{ ".MuiDialogContent-root": { overflowY: "clip" } }}>
                   <SelectStock
                     title="Select a stock to add it to the portfolio"
                     onClose={() => {}}
@@ -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>
               ))

diff --git a/packages/frontend/src/layouts/SidebarLayout/SidebarLayout.tsx b/packages/frontend/src/layouts/SidebarLayout/SidebarLayout.tsx
@@ -38,8 +38,9 @@ const SidebarLayout: FC = (): JSX.Element => {
           sx={{
             position: "relative",
             zIndex: 5,
-            display: "block",
-            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "100dvh",
             [theme.breakpoints.up("lg")]: { ml: `${theme.sidebar.width}` },
           }}
         >