From bc6208c4362e7fb7bb984c8d33a9c64dbb6c0d0a Mon Sep 17 00:00:00 2001
From: Johnny Bouder <jbouder@metrostar.com>
Date: Sat, 29 Jun 2024 14:58:07 -0400
Subject: [PATCH] Update to ensure main content area fills display height.

---
 src/App.tsx     | 30 ++++++++++++++----------------
 src/styles.scss | 22 +++++++++++++++++++---
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7283cc96..8286a0ce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,21 +13,19 @@ const queryClient = new QueryClient();
 
 export const App = (): React.ReactElement => (
   <QueryClientProvider client={queryClient}>
-    <div>
-      <Header />
-      <main id="mainSection" className="usa-section">
-        <Routes>
-          <Route path="/signin" element={<SignIn />} />
-          <Route path="/" element={<Home />} />
-          <Route element={<ProtectedRoute />}>
-            <Route path="/dashboard" element={<Dashboard />} />
-          </Route>
-          <Route element={<ProtectedRoute />}>
-            <Route path="/details/:id" element={<Details />} />
-          </Route>
-        </Routes>
-      </main>
-      <Footer />
-    </div>
+    <Header />
+    <main id="mainSection" className="usa-section">
+      <Routes>
+        <Route path="/signin" element={<SignIn />} />
+        <Route path="/" element={<Home />} />
+        <Route element={<ProtectedRoute />}>
+          <Route path="/dashboard" element={<Dashboard />} />
+        </Route>
+        <Route element={<ProtectedRoute />}>
+          <Route path="/details/:id" element={<Details />} />
+        </Route>
+      </Routes>
+    </main>
+    <Footer />
   </QueryClientProvider>
 );
diff --git a/src/styles.scss b/src/styles.scss
index 361b2296..0ddf7179 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,11 +1,27 @@
 @forward 'providers/uswds/uswds.scss';
 
-.usa-section {
-  padding-top: 1em;
+html,
+body {
+  height: 100%;
+}
+
+#root {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 #mainSection {
-  min-height: 500px;
+  display: unset;
+  flex: 1;
+}
+
+.usa-footer {
+  overflow: visible;
+}
+
+.usa-section {
+  padding-top: 1em;
 }
 
 .usa-form .usa-button {