From 37248dd1cfb0506a16c1bbadd4ab5a9916f91975 Mon Sep 17 00:00:00 2001
From: Hel Nershing Thapa <51614993+HelNershingThapa@users.noreply.github.com>
Date: Wed, 12 Jul 2023 09:37:56 +0545
Subject: [PATCH] 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
---
 frontend/src/components/banner/topBanner.js | 4 ++--
 frontend/src/views/root.js                  | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/banner/topBanner.js b/frontend/src/components/banner/topBanner.js
index 6dfcab64c8..9ca7b94538 100644
--- 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
index 73d47e5304..643039aca7 100644
--- 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}>