wip

src/layouts/DefaultLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { authClient } from '@/lib/auth-client.ts'
 import { computed, ref } from 'vue'
 import ProjectMenu from '@/components/ProjectMenu.vue'
@@ -9,6 +9,7 @@ import { useThemeMode } from '@/composables/useThemeMode.ts'
 import { THEME_ICONS } from '@/lib/theme.ts'
 
 const router = useRouter()
+const route = useRoute()
 const session = authClient.useSession()
 const { mode: themeMode, cycleThemeMode } = useThemeMode()
 
@@ -59,6 +60,10 @@ async function goToSignOut() {
 const goToSettings = () => {
   router.push({ name: 'settings' })
 }
+
+const fluid = computed(() => {
+  return route.meta.fluid !== undefined ? !!route.meta.fluid : true
+})
 </script>
 
 <template>
@@ -141,12 +146,14 @@ const goToSettings = () => {
       </div>
     </v-app-bar>
     <v-main>
-      <v-container :fluid="false">
+      <v-container :fluid="fluid" class="layout-container">
         <div class="nav-row d-flex align-center ga-2 mb-2">
           <back-button />
           <app-breadcrumbs />
         </div>
-        <slot></slot>
+        <div class="layout-content">
+          <slot></slot>
+        </div>
       </v-container>
     </v-main>
   </v-layout>
@@ -156,4 +163,15 @@ const goToSettings = () => {
 .nav-row:empty {
   display: none;
 }
+
+.layout-container {
+  height: calc(100dvh - var(--v-layout-top) - var(--v-layout-bottom));
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-content {
+  flex: 1;
+  min-height: 0;
+}
 </style>