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>
This commit is contained in:
@@ -334,7 +334,7 @@ async function openDetail(id) {
|
|||||||
background so rows don't bleed through. */
|
background so rows don't bleed through. */
|
||||||
.fc-dl__sticky {
|
.fc-dl__sticky {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 48px;
|
top: 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
background: rgb(var(--v-theme-background));
|
background: rgb(var(--v-theme-background));
|
||||||
padding: 8px 0 10px;
|
padding: 8px 0 10px;
|
||||||
|
|||||||
@@ -509,11 +509,12 @@ async function bulkDelete() {
|
|||||||
.fc-subs__bar {
|
.fc-subs__bar {
|
||||||
display: flex; gap: 0.75rem; align-items: center;
|
display: flex; gap: 0.75rem; align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
/* Sticky below the top nav so the filter/search controls stay
|
/* Sticky to the top of the hub's scroll window so the filter/search
|
||||||
reachable while scrolling a long subscription list. Opaque bg so
|
controls stay reachable while scrolling a long subscription list.
|
||||||
table rows don't bleed through. Operator-flagged 2026-05-28. */
|
Opaque bg so table rows don't bleed through. Operator-flagged
|
||||||
|
2026-05-28. */
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 48px;
|
top: 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
background: rgb(var(--v-theme-background));
|
background: rgb(var(--v-theme-background));
|
||||||
padding: 8px 0 1rem;
|
padding: 8px 0 1rem;
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
</v-tab>
|
</v-tab>
|
||||||
</v-tabs>
|
</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">
|
<v-window-item value="subscriptions">
|
||||||
<SubscriptionsTab />
|
<SubscriptionsTab />
|
||||||
</v-window-item>
|
</v-window-item>
|
||||||
@@ -52,8 +52,22 @@ const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
|
|||||||
.fc-subs-shell {
|
.fc-subs-shell {
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
margin-inline: auto;
|
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 {
|
.fc-subs-tabs {
|
||||||
|
flex: 0 0 auto;
|
||||||
border-bottom: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user