From dcb794f4ed976ff71489516eeb3ea5a9f8179795 Mon Sep 17 00:00:00 2001
From: David Zwart <davidzwa@gmail.com>
Date: Sat, 26 Oct 2024 23:33:20 +0200
Subject: [PATCH] fix: improve settings page layout

---
 src/components/Settings/SettingsView.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Settings/SettingsView.vue b/src/components/Settings/SettingsView.vue
index 04205204..e7cb7eef 100644
--- a/src/components/Settings/SettingsView.vue
+++ b/src/components/Settings/SettingsView.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-row no-gutters>
-    <div>
-      <v-navigation-drawer :permanent="true">
+  <div style="height: calc(100vh - 64px)">
+    <v-row no-gutters class="fill-height" style="padding: 0">
+      <v-navigation-drawer :permanent="true" width="240" style="flex-shrink: 0; padding: 0">
         <v-list-item>
           <v-list-item-content>
-            <v-list-item-title class="text-h6"> Settings</v-list-item-title>
-            <v-list-item-subtitle> Adjust your Fdm Monster</v-list-item-subtitle>
+            <v-list-item-title class="text-h6">Settings</v-list-item-title>
+            <v-list-item-subtitle>Adjust your Fdm Monster</v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
 
@@ -30,10 +30,12 @@
           </v-list-item>
         </v-list>
       </v-navigation-drawer>
-    </div>
 
-    <router-view class="grow" />
-  </v-row>
+      <v-col class="d-flex fill-height">
+        <router-view class="grow" />
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script lang="ts" setup>