Fix footer formatting on pages that don't fill height

Author: Tibowl

components/Footer.tsx

@@ -1,7 +1,7 @@
 import FormattedLink from "./FormattedLink"
 
-export default function Footer({ location, marginBottom }: { location: string, marginBottom: number }) {
-    return <footer className="flex flex-col items-center justify-center w-full border-t text-center" style={({ marginBottom: `${marginBottom}px` })}>
+export default function Footer({ location, marginBottom }: { location: string, marginBottom?: number }) {
+    return <footer className="flex flex-col items-center justify-center w-full border-t text-center" style={({ marginBottom: marginBottom && `${marginBottom}px` })}>
         <div className="flex items-center justify-center">
             © All rights reserved by miHoYo. Other properties belong to their respective owners.
         </div>

pages/_app.tsx

@@ -46,30 +46,27 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
       />}
     </Head>
 
-    <div className="w-full flex-1">
-      <div className="absolute z-10">
-        <CookieConsent
-          buttonText="Accept all cookies"
-          declineButtonText="Refuse non-essential cookies"
-          enableDeclineButton
-          onAccept={() => {
-            setConsented(true)
-          }}
-          onDecline={() => {
-            setConsented(false)
-          }}
-        >
-          This website uses cookies to enhance the user experience.
-          <div style={{ fontSize: "12px" }}>Currently we only use these for analytic purposes, intended to figure out where to focus our efforts.</div>
-        </CookieConsent>
-      </div>
-
+    <div className="w-full">
       <NavBar location={router.asPath} />
       <div className="p-4 flex flex-col w-full flex-1 px-1 lg:px-20 items-center justify-center">
         <Component {...pageProps} location={router.asPath} />
       </div>
-
-      <Footer location={router.asPath} marginBottom={consented || consented === null ? 3 : 80} />
     </div>
+
+    <CookieConsent
+      buttonText="Accept all cookies"
+      declineButtonText="Refuse non-essential cookies"
+      enableDeclineButton
+      onAccept={() => {
+        setConsented(true)
+      }}
+      onDecline={() => {
+        setConsented(false)
+      }}
+    >
+      This website uses cookies to enhance the user experience.
+      <div style={{ fontSize: "12px" }}>Currently we only use these for analytic purposes, intended to figure out where to focus our efforts.</div>
+    </CookieConsent>
+    <Footer location={router.asPath} marginBottom={consented || consented === null ? 3 : 80} />
   </div>
 }