Merge pull request #268 from MetroStar/layout-updates

Update to ensure main content area fills display height.
MetroStar · Jul 1, 2024 · bb9ab96 · bb9ab96
2 parents 0c901ad + bc6208c
commit bb9ab96
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git 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
@@ -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 {