fix(ui): measure real nav height (--fc-nav-h), stop Explore breadcrumb tucking under nav (#1481)
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>
This commit is contained in:
@@ -78,6 +78,13 @@
|
||||
:root {
|
||||
--fc-chrome-rgb: 20, 23, 26; /* obsidian #14171A — matches the TopNav */
|
||||
--fc-chrome-seam: 0.46; /* alpha where the nav hands off to the sub-header */
|
||||
/* Actual TopNav height, measured live (ResizeObserver in TopNav.vue) and used
|
||||
by full-height workspaces (Explore/Subscriptions: calc(100vh - var)) and by
|
||||
every sticky sub-header pinned beneath the nav (top: var). This was a
|
||||
hardcoded 64px in ~6 places; Vuetify 4's MD3 sizing made the real nav a
|
||||
different height, so the Explore workspace overflowed and its breadcrumb
|
||||
tucked under the nav (#1481). This fallback is only used pre-measure. */
|
||||
--fc-nav-h: 64px;
|
||||
}
|
||||
/* Applied to a sticky sub-header so it continues the nav's fade instead of
|
||||
restarting it. Percentage stops so the fade always spans the element's height
|
||||
|
||||
Reference in New Issue
Block a user