Merge pull request #1637 from fdm-monster/fix/settings-page-layout-is…

…sues

fix: improve settings page layout

RELEASE_NOTES.MD

@@ -1,5 +1,11 @@
 # Release notes
 
+## Client 23/10/2024 1.6.2
+
+Fixes:
+
+- Improve the layout of navigation and content. Now it wont wrap and its vertically stretched.
+
 ## Client 23/10/2024 1.6.1
 
 Fixes:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",
   "repository": {

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>