fix(ui): measure real nav height (--fc-nav-h) — Explore fits on 1080p, no breadcrumb tuck (#1481) #227

2026-07-13T15:32:17-04:00

bvandeusen commented

2026-07-13 15:32:17 -04:00

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.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

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

bvandeusen added 1 commit 2026-07-13 15:32:17 -04:00

fix(ui): measure real nav height (--fc-nav-h), stop Explore breadcrumb tucking under nav (#1481 )

CI / lint (push) Successful in 3s

Details

CI / frontend-build (push) Successful in 19s

Details

CI / backend-lint-and-test (push) Successful in 30s

Details

CI / integration (push) Successful in 3m44s

Details

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>

bvandeusen merged commit bb1a938cc0 into main

2026-07-13 15:32:25 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bvandeusen/FabledCurator#227