Operator-flagged: the Explore breadcrumb sat under the TopNav by default and the workspace didn't fit on a 1080p monitor.
Root cause
The app uses a plain sticky TopNav (no <v-main> managing offsets), 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: Explore was sized taller than the space below the nav → overflowed the viewport → the sticky nav rode up over the breadcrumb.
Fix — measure, don't guess
TopNav measures its own height with a ResizeObserver and publishes it as --fc-nav-h on documentElement (default 64px in app.css). Every consumer now uses var(--fc-nav-h). The layout self-corrects to the nav's real height and stays correct as it reflows (per-view teleported action buttons, mobile breakpoint, chip state). Bonus: sub-headers now pin at the nav's exact bottom, tightening the new chrome-gradient seam.
Operator-flagged: the Explore breadcrumb sat under the TopNav by default and the workspace didn't fit on a 1080p monitor.
## Root cause
The app uses a plain sticky `TopNav` (no `<v-main>` managing offsets), 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: Explore was sized taller than the space below the nav → overflowed the viewport → the sticky nav rode up over the breadcrumb.
## Fix — measure, don't guess
`TopNav` measures its own height with a `ResizeObserver` and publishes it as `--fc-nav-h` on `documentElement` (default `64px` in app.css). Every consumer now uses `var(--fc-nav-h)`. The layout self-corrects to the nav's real height and stays correct as it reflows (per-view teleported action buttons, mobile breakpoint, chip state). Bonus: sub-headers now pin at the nav's exact bottom, tightening the new chrome-gradient seam.
Files: app.css, TopNav.vue, ExploreView.vue, SubscriptionsView.vue, GalleryFilterBar.vue, BrowseView.vue, SeriesView.vue, SettingsView.vue.
CI green on `dev` head `67c7ca8` (run 2227). No backend/DB changes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi
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>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Operator-flagged: the Explore breadcrumb sat under the TopNav by default and the workspace didn't fit on a 1080p monitor.
Root cause
The app uses a plain sticky
TopNav(no<v-main>managing offsets), and the nav's height was hardcoded as64pxin ~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, so64pxwas wrong: Explore was sized taller than the space below the nav → overflowed the viewport → the sticky nav rode up over the breadcrumb.Fix — measure, don't guess
TopNavmeasures its own height with aResizeObserverand publishes it as--fc-nav-hondocumentElement(default64pxin app.css). Every consumer now usesvar(--fc-nav-h). The layout self-corrects to the nav's real height and stays correct as it reflows (per-view teleported action buttons, mobile breakpoint, chip state). Bonus: sub-headers now pin at the nav's exact bottom, tightening the new chrome-gradient seam.Files: app.css, TopNav.vue, ExploreView.vue, SubscriptionsView.vue, GalleryFilterBar.vue, BrowseView.vue, SeriesView.vue, SettingsView.vue.
CI green on
devhead67c7ca8(run 2227). No backend/DB changes.🤖 Generated with Claude Code
https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi