fix(documents): fit workspace within private layout

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/FilesSidebar.vue

@@ -23,6 +23,7 @@ const emit = defineEmits<{
 <template>
   <v-navigation-drawer
     :model-value="modelValue"
+    contained
     @update:model-value="emit('update:modelValue', $event)"
     :permanent="!isMobile"
     :temporary="isMobile"

src/components/FilesToolbar.vue

@@ -34,15 +34,17 @@ const viewModeModel = computed({
 </script>
 
 <template>
-  <v-app-bar elevation="0" density="compact" class="files-toolbar">
+  <v-toolbar elevation="0" density="compact" class="files-toolbar">
     <template #prepend>
-      <v-app-bar-nav-icon
+      <v-btn
         v-if="isMobile"
+        icon="mdi-menu"
+        variant="text"
         @click="emit('toggle-sidebar')"
       />
     </template>
 
-    <v-app-bar-title>Files</v-app-bar-title>
+    <v-toolbar-title>Files</v-toolbar-title>
 
     <v-spacer />
 
@@ -122,7 +124,7 @@ const viewModeModel = computed({
         <span class="d-none d-sm-inline">New Folder</span>
       </v-btn>
     </template>
-  </v-app-bar>
+  </v-toolbar>
 </template>
 
 <style scoped>

src/pages/FilesPage.vue

@@ -934,7 +934,8 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   padding: 48px;
   text-align: center;
   width: 100%;
@@ -948,19 +949,22 @@ onMounted(async () => {
 .files-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   isolation: isolate;
 }
 
 .files-content {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
 
 .files-main {
   flex: 1;
+  min-height: 0;
   display: flex;
   overflow: hidden;
   min-width: 0;
@@ -968,6 +972,7 @@ onMounted(async () => {
 
 .files-workspace {
   flex: 1;
+  min-height: 0;
   display: flex;
   overflow: hidden;
   min-width: 0;
@@ -975,6 +980,7 @@ onMounted(async () => {
 
 .files-browser-panel {
   flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;

src/routes.ts

@@ -4,7 +4,8 @@ const routes: RouteRecordRaw[] = [
   {
     name: 'documents',
     path: '/',
-    component: () => import('@/pages/FilesPage.vue')
+    component: () => import('@/pages/FilesPage.vue'),
+    meta: { layout: 'fixed' },
   },
 ]