bvandeusen
67c7ca8603
The app uses a plain sticky TopNav (no v-main), and the nav's height was hardcoded as 64px in ~6 places: the Explore + Subscriptions full-height workspaces (height: calc(100vh - 64px)) and every sticky sub-header pinned beneath the nav (top: 64px — Gallery filter bar, Browse/Series/Settings tabs). Vuetify 4's MD3 sizing changed the real nav height, so 64px was wrong: the Explore workspace was sized taller than the space below the nav, overflowed the viewport, and its breadcrumb tucked under the (taller) nav on 1080p. TopNav now measures its own height via ResizeObserver and publishes it as --fc-nav-h on documentElement (default 64px in app.css). Every consumer uses var(--fc-nav-h) instead of the magic number, so the layout self-corrects to the nav's real height and stays correct as it reflows (per-view teleported actions, mobile breakpoint). Also tightens the new chrome-gradient seam — sub-headers now pin at the nav's exact bottom. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<template>
|
|
<v-container fluid class="pt-2 pb-6 fc-subs-shell">
|
|
<v-tabs
|
|
v-model="tab"
|
|
align-tabs="start"
|
|
color="accent"
|
|
density="compact"
|
|
class="fc-subs-tabs fc-chrome-continues"
|
|
>
|
|
<v-tab value="subscriptions">
|
|
<v-icon start>mdi-account-multiple-check</v-icon>
|
|
Subscriptions
|
|
</v-tab>
|
|
<v-tab value="downloads">
|
|
<v-icon start>mdi-cloud-download</v-icon>
|
|
Downloads
|
|
</v-tab>
|
|
<v-tab value="settings">
|
|
<v-icon start>mdi-cog</v-icon>
|
|
Settings
|
|
</v-tab>
|
|
</v-tabs>
|
|
|
|
<v-window v-model="tab" class="mt-4 fc-subs-window">
|
|
<v-window-item value="subscriptions">
|
|
<SubscriptionsTab />
|
|
</v-window-item>
|
|
<v-window-item value="downloads">
|
|
<DownloadsTab />
|
|
</v-window-item>
|
|
<v-window-item value="settings">
|
|
<SettingsTab />
|
|
</v-window-item>
|
|
</v-window>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SubscriptionsTab from '../components/subscriptions/SubscriptionsTab.vue'
|
|
import DownloadsTab from '../components/subscriptions/DownloadsTab.vue'
|
|
import SettingsTab from '../components/subscriptions/SettingsTab.vue'
|
|
import { useTabQuery } from '../composables/useTabQuery.js'
|
|
|
|
const VALID_TABS = ['subscriptions', 'downloads', 'settings']
|
|
|
|
const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Cap the dashboards at a centered 1600px so rows aren't a mile wide on
|
|
wide/ultrawide monitors (operator-flagged 2026-05-28). */
|
|
.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). --fc-nav-h = the TopNav's real measured height (#1481). */
|
|
height: calc(100vh - var(--fc-nav-h, 64px));
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.fc-subs-tabs {
|
|
flex: 0 0 auto;
|
|
/* Cancel the shell's pt-2 so the tabs sit flush under the 64px nav, letting
|
|
the .fc-chrome-continues fade read as one gradient with it (operator
|
|
2026-07-13). The fade replaces the old border-bottom separator. */
|
|
margin-top: -8px;
|
|
}
|
|
.fc-subs-window {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|