From 2fd01071973205f02742711c532694fcbf2aaa4f Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 12:35:36 -0500
Subject: [PATCH] Make layout expand to fill height of body

---
 index.html  |  2 +-
 src/App.vue | 15 ++++++---------
 src/main.ts |  4 ++--
 3 files changed, 9 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index 11603f8..8495822 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
-  <body>
+  <body style="display: flex; height: 100%; min-height: 100vh; flex-direction: column">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/src/App.vue b/src/App.vue
index 2d7adae..144cd68 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,13 +19,9 @@ import { MathPage } from "./support/page";
       </div>
     </v-app-bar>
 
-    <v-main>
-      
-      <v-card elevation="0" height="h-100">
-          <router-view />
-
-      </v-card>
-    </v-main>
+    <div style="margin-top: 30px">  <!-- Account for the navbar height -->
+      <router-view/>
+    </div>
   </v-app>
 </template>
 
@@ -35,8 +31,9 @@ import { MathPage } from "./support/page";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 .links {
   color: #fff;
diff --git a/src/main.ts b/src/main.ts
index 0e4e506..5509b40 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,8 +14,8 @@ const vuetify = createVuetify({
     components,
     directives,
     theme: {
-        defaultTheme: 'dark'
-      }
+        defaultTheme: 'dark',
+    },
 }) // Replaces new Vuetify(...)
 app.use(vuetify)
 
