dashboard scrolls properly now

This commit is contained in:
Justin Visser 2026-02-19 18:45:55 +01:00
parent ae2ca8f149
commit e49e753023
5 changed files with 19 additions and 13 deletions

View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed } from "vue";
import { RouterView } from "vue-router";
import { RouterView, useRoute } from "vue-router";
import AppHeader from "@/components/layout/AppHeader.vue";
import AppNav from "@/components/layout/AppNav.vue";
@ -8,7 +8,9 @@ import RequestErrorPanel from "@/components/patterns/RequestErrorPanel.vue";
import { useAuthStore } from "@/stores/auth";
const auth = useAuthStore();
const route = useRoute();
const showChrome = computed(() => auth.isAuthenticated);
const shouldLockMainScroll = computed(() => route.meta.lockMainScroll === true);
</script>
<template>
@ -22,7 +24,11 @@ const showChrome = computed(() => auth.isAuthenticated);
class="grid h-[calc(100dvh-4.5rem)] min-h-0 grid-cols-1 grid-rows-[auto_minmax(0,1fr)] lg:grid-cols-[17rem_minmax(0,1fr)] lg:grid-rows-1"
>
<AppNav class="min-h-0 overflow-x-hidden lg:overflow-y-auto" />
<main id="app-main" class="min-h-0 min-w-0 overflow-y-auto overflow-x-hidden px-4 py-6 sm:px-6 lg:px-8">
<main
id="app-main"
class="min-h-0 min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 lg:px-8"
:class="shouldLockMainScroll ? 'overflow-y-auto lg:overflow-y-hidden' : 'overflow-y-auto'"
>
<RouterView />
</main>
</div>