From 42ddac999688698d07a334e5b8459ecd08a4355c Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 28 May 2026 18:13:19 -0400
Subject: [PATCH] fix(subscriptions): fixed-height hub so only the tab content
 scrolls

The whole view scrolled instead of just the subscription list. Made the
hub a viewport-height flex column (tabs stay fixed) with the v-window as
the single internal scroll container; the per-tab sticky control bars now
pin to the window top (top:48px -> 0). Operator-flagged 2026-05-28.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/subscriptions/DownloadsTab.vue    |  2 +-
 .../subscriptions/SubscriptionsTab.vue           |  9 +++++----
 frontend/src/views/SubscriptionsView.vue         | 16 +++++++++++++++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/subscriptions/DownloadsTab.vue b/frontend/src/components/subscriptions/DownloadsTab.vue
index 36c2718..88e8da6 100644
--- a/frontend/src/components/subscriptions/DownloadsTab.vue
+++ b/frontend/src/components/subscriptions/DownloadsTab.vue
@@ -334,7 +334,7 @@ async function openDetail(id) {
    background so rows don't bleed through. */
 .fc-dl__sticky {
   position: sticky;
-  top: 48px;
+  top: 0;
   z-index: 3;
   background: rgb(var(--v-theme-background));
   padding: 8px 0 10px;
diff --git a/frontend/src/components/subscriptions/SubscriptionsTab.vue b/frontend/src/components/subscriptions/SubscriptionsTab.vue
index 2fe5cc8..bbd89a8 100644
--- a/frontend/src/components/subscriptions/SubscriptionsTab.vue
+++ b/frontend/src/components/subscriptions/SubscriptionsTab.vue
@@ -509,11 +509,12 @@ async function bulkDelete() {
 .fc-subs__bar {
   display: flex; gap: 0.75rem; align-items: center;
   flex-wrap: wrap;
-  /* Sticky below the top nav so the filter/search controls stay
-     reachable while scrolling a long subscription list. Opaque bg so
-     table rows don't bleed through. Operator-flagged 2026-05-28. */
+  /* Sticky to the top of the hub's scroll window so the filter/search
+     controls stay reachable while scrolling a long subscription list.
+     Opaque bg so table rows don't bleed through. Operator-flagged
+     2026-05-28. */
   position: sticky;
-  top: 48px;
+  top: 0;
   z-index: 3;
   background: rgb(var(--v-theme-background));
   padding: 8px 0 1rem;
diff --git a/frontend/src/views/SubscriptionsView.vue b/frontend/src/views/SubscriptionsView.vue
index 0f2098b..318e8e8 100644
--- a/frontend/src/views/SubscriptionsView.vue
+++ b/frontend/src/views/SubscriptionsView.vue
@@ -21,7 +21,7 @@
       </v-tab>
     </v-tabs>
 
-    <v-window v-model="tab" class="mt-4">
+    <v-window v-model="tab" class="mt-4 fc-subs-window">
       <v-window-item value="subscriptions">
         <SubscriptionsTab />
       </v-window-item>
@@ -52,8 +52,22 @@ const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
 .fc-subs-shell {
   max-width: 1600px;
   margin-inline: auto;
+  /* Fixed-height hub: the tabs (and each tab's sticky control bar) stay
+     put while ONLY the tab content scrolls — previously the whole view
+     scrolled instead of just the subscription list (operator-flagged
+     2026-05-28). 64px = the TopNav height (AppShell .fc-content pad-top). */
+  height: calc(100vh - 64px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 .fc-subs-tabs {
+  flex: 0 0 auto;
   border-bottom: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
 }
+.fc-subs-window {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
 </style>