fix: improve settings page layout

fdm-monster · Oct 26, 2024 · dcb794f · dcb794f
1 parent af47bc2
commit dcb794f
Showing 1 changed file with 10 additions and 8 deletions.
diff --git 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>