Merge pull request #22 from powdr-labs/footer-at-bottom

Place footer at the bottom
powdr-labs · Sep 29, 2024 · 16630ed · 16630ed
2 parents f268a76 + 2650748
commit 16630ed
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -97,16 +97,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
       <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
       <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
-      <body className="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
+      <body className="min-h-screen bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
         <ThemeProviders>
           {/* <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} /> */}
-          <SectionContainer>
-            <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
-              <Header />
-              <main className="mb-auto">{children}</main>
-            </SearchProvider>
-          </SectionContainer>
-          <Footer />
+          <div className="flex min-h-screen flex-col">
+            <SectionContainer>
+              <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
+                <Header />
+                <main className="mb-12 flex-grow">{children}</main>
+              </SearchProvider>
+            </SectionContainer>
+            <Footer />
+          </div>
         </ThemeProviders>
       </body>
     </html>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -3,7 +3,7 @@ import { PowdrLogo } from './powdrLogo'
 
 export default function Footer() {
   return (
-    <footer className="mt-12 bg-[#1e1b4b] py-8 text-white">
+    <footer className="mt-auto bg-[#1e1b4b] py-8 text-white">
       <div className="container mx-auto flex flex-col items-center">
         <PowdrLogo className="mb-4 h-24 w-auto text-white" />
         <p className="mb-2 text-sm">