From e49e75302357433e22786118c3e7a01f342460b2 Mon Sep 17 00:00:00 2001
From: Justin Visser <justinfvisser@gmail.com>
Date: Thu, 19 Feb 2026 18:45:55 +0100
Subject: [PATCH] dashboard scrolls properly now

---
 frontend/src/app/AppShell.vue              | 10 ++++++++--
 frontend/src/app/router.ts                 |  2 +-
 frontend/src/components/layout/AppPage.vue |  4 ++--
 frontend/src/features/dashboard/index.ts   |  2 +-
 frontend/src/pages/DashboardPage.vue       | 14 +++++++-------
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/AppShell.vue b/frontend/src/app/AppShell.vue
index 4d5d104..bd0ea11 100644
--- a/frontend/src/app/AppShell.vue
+++ b/frontend/src/app/AppShell.vue
@@ -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>
diff --git a/frontend/src/app/router.ts b/frontend/src/app/router.ts
index 1527b7a..1b478da 100644
--- a/frontend/src/app/router.ts
+++ b/frontend/src/app/router.ts
@@ -28,7 +28,7 @@ export const router = createRouter({
       path: "/dashboard",
       name: "dashboard",
       component: DashboardPage,
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true, lockMainScroll: true },
     },
     {
       path: "/scholars",
diff --git a/frontend/src/components/layout/AppPage.vue b/frontend/src/components/layout/AppPage.vue
index adc9a22..49473e0 100644
--- a/frontend/src/components/layout/AppPage.vue
+++ b/frontend/src/components/layout/AppPage.vue
@@ -15,7 +15,7 @@ const props = withDefaults(
   <section
     :class="
       props.fill
-        ? 'min-w-0 flex min-h-0 flex-col gap-6 lg:h-full'
+        ? 'min-w-0 flex min-h-0 flex-col gap-6 lg:h-full lg:overflow-hidden'
         : 'page-stack min-w-0'
     "
   >
@@ -23,7 +23,7 @@ const props = withDefaults(
       <h1 class="page-title">{{ props.title }}</h1>
       <p v-if="props.subtitle" class="page-subtitle">{{ props.subtitle }}</p>
     </header>
-    <div v-if="props.fill" class="min-h-0 flex-1">
+    <div v-if="props.fill" class="flex min-h-0 flex-1 flex-col">
       <slot />
     </div>
     <slot v-else />
diff --git a/frontend/src/features/dashboard/index.ts b/frontend/src/features/dashboard/index.ts
index dfba916..94d546a 100644
--- a/frontend/src/features/dashboard/index.ts
+++ b/frontend/src/features/dashboard/index.ts
@@ -40,7 +40,7 @@ function countQueueStatuses(statuses: string[]): QueueHealth {
 export async function fetchDashboardSnapshot(): Promise<DashboardSnapshot> {
   const [publications, runs, queueItems] = await Promise.all([
     listPublications({ mode: "new", limit: 20 }),
-    listRuns({ limit: 5 }),
+    listRuns({ limit: 20 }),
     listQueueItems(200),
   ]);
 
diff --git a/frontend/src/pages/DashboardPage.vue b/frontend/src/pages/DashboardPage.vue
index 3762fea..cd66c32 100644
--- a/frontend/src/pages/DashboardPage.vue
+++ b/frontend/src/pages/DashboardPage.vue
@@ -87,7 +87,7 @@ onMounted(() => {
     subtitle="Track recent publication updates and monitor background profile checks."
     fill
   >
-    <div class="flex min-h-0 flex-1 flex-col gap-4">
+    <div class="flex min-h-0 flex-1 flex-col gap-4 xl:overflow-hidden">
       <RequestStateAlerts
         :success-message="successMessage"
         :error-message="errorMessage"
@@ -96,10 +96,10 @@ onMounted(() => {
         @dismiss-success="successMessage = null"
       />
 
-      <div class="min-h-0 flex-1">
+      <div class="h-0 min-h-0 flex-1 xl:overflow-hidden">
         <AsyncStateGate :loading="loading" :loading-lines="6" :show-empty="false">
           <template v-if="snapshot">
-            <section class="grid min-h-0 gap-4 xl:h-full xl:grid-cols-2">
+            <section class="grid min-h-0 gap-4 xl:h-full xl:grid-cols-2 xl:grid-rows-[minmax(0,1fr)] xl:overflow-hidden">
               <AppCard class="flex min-h-0 flex-col gap-4 xl:h-full xl:overflow-hidden">
                 <div class="flex flex-wrap items-center justify-between gap-2">
                   <div class="space-y-1">
@@ -120,7 +120,7 @@ onMounted(() => {
                   body="When a completed update check discovers changes, they will appear here."
                 />
 
-                <ul v-else class="grid min-h-0 flex-1 gap-3 overflow-y-auto pr-1">
+                <ul v-else class="grid min-h-0 flex-1 content-start gap-3 overflow-y-scroll overscroll-contain pr-1">
                   <li
                     v-for="item in snapshot.recentPublications.slice(0, 20)"
                     :key="item.publication_id"
@@ -149,7 +149,7 @@ onMounted(() => {
                 </ul>
               </AppCard>
 
-              <div class="grid min-h-0 gap-4 xl:h-full xl:grid-rows-[auto_minmax(0,1fr)]">
+              <div class="grid min-h-0 gap-4 xl:h-full xl:grid-rows-[auto_minmax(0,1fr)] xl:overflow-hidden">
                 <AppCard class="flex min-h-0 flex-col gap-4">
                   <div class="flex items-center gap-1">
                     <h2 class="text-lg font-semibold text-ink-primary">Overview</h2>
@@ -237,14 +237,14 @@ onMounted(() => {
                     body="Start an update check to begin monitoring activity."
                   />
 
-                  <div class="grid min-h-0 flex-1 gap-2 xl:overflow-hidden">
+                  <div class="flex min-h-0 flex-1 flex-col gap-2 xl:overflow-hidden">
                     <p class="text-xs font-semibold uppercase tracking-wide text-muted">Recent checks</p>
                     <AppEmptyState
                       v-if="snapshot.recentRuns.length === 0"
                       title="No checks yet"
                       body="Check history will appear here."
                     />
-                    <ul v-else class="grid gap-2 overflow-y-auto pr-1">
+                    <ul v-else class="grid min-h-0 flex-1 content-start gap-2 overflow-y-auto overscroll-contain pr-1">
                       <li
                         v-for="run in snapshot.recentRuns"
                         :key="run.id"