Keep the footer on the bottom (#5930)

Had to wrap the `TopBanner` component with a div since it was conditionally rendered and a uniform value was required for `gridTemplateRows` property
hotosm · Jul 12, 2023 · 37248dd · 37248dd
1 parent a6d6d32
commit 37248dd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/frontend/src/components/banner/topBanner.js b/frontend/src/components/banner/topBanner.js
@@ -9,7 +9,7 @@ export function TopBanner() {
   const [, error, data] = useFetchWithAbort(`system/banner/`);
 
   return (
-    <>
+    <div>
       {location.pathname === '/' && data.visible && !error && (
         <div className="ph3 b--grey-light bb bg-tan top-banner-container">
           <div
@@ -18,6 +18,6 @@ export function TopBanner() {
           />
         </div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/frontend/src/views/root.js b/frontend/src/views/root.js
@@ -11,7 +11,10 @@ import { Footer } from '../components/footer';
 // Components common to all routes can be included in <App>
 export function Root() {
   return (
-    <div className="flex flex-column">
+    <div
+      className="min-vh-100-l"
+      style={{ display: 'grid', gridTemplateRows: 'auto auto 1fr auto' }}
+    >
       <TopBanner />
       <Header />
       <QueryParamProvider adapter={ReactRouter6Adapter}>