Move contentContainer back to _app.tsx

components/ShapesBackground.module.css

@@ -1,10 +1,3 @@
-.contentContainer {
-  position: relative;
-
-  /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/
-  flex-grow: 1;
-}
-
 .shapesContainer {
   position: absolute;
   top: 0;

components/ShapesBackground.tsx

@@ -4,9 +4,9 @@ import styles from "./ShapesBackground.module.css";
 
 export function ShapesBackground(props: { children: React.ReactNode }) {
   return (
-    <div className={styles.contentContainer}>
+    <>
       <div className={styles.shapesContainer}></div>
       {props.children}
-    </div>
+    </>
   );
 }

pages/_app.module.css

@@ -3,3 +3,10 @@
   flex-direction: column;
   min-height: 100vh;
 }
+
+.contentContainer {
+  position: relative;
+
+  /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/
+  flex-grow: 1;
+}

pages/_app.tsx

@@ -23,12 +23,14 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
       <MDXProvider components={{ a: Link }}>
         <div className={styles.appContainer}>
           <Navbar />
-          {/* Wrapping content with a ShapesBackground to allow for shapes in the background and a display: block parent */}
-          <ShapesBackground>
-            <Layout>
-              <Component {...pageProps} />
-            </Layout>
-          </ShapesBackground>
+          {/* Wrapping content with a div to allow for a display: block parent */}
+          <div className={styles.contentContainer}>
+            <ShapesBackground>
+              <Layout>
+                <Component {...pageProps} />
+              </Layout>
+            </ShapesBackground>
+          </div>
           <Footer />
         </div>
       </MDXProvider>