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>

frontend/src/views/BrowseView.vue

@@ -154,7 +154,7 @@ function clearFilter(key) {
 <style scoped>
 .fc-browse__head {
   position: sticky;
-  top: 64px; /* directly under AppShell's 64px sticky TopNav */
+  top: var(--fc-nav-h, 64px); /* pins at the nav's real measured bottom (#1481) */
   z-index: 4;
   /* Background is the shared .fc-chrome-continues fade — it continues the nav's
      gradient instead of a solid surface band (operator 2026-07-13). */

frontend/src/views/ExploreView.vue

@@ -286,10 +286,13 @@ onUnmounted(() => {
 <style scoped>
 .fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 
-/* Full-height workspace under the sticky top nav. */
+/* Full-height workspace under the sticky top nav. --fc-nav-h is the nav's REAL
+   measured height (set by TopNav) — a hardcoded 64px here overflowed the
+   viewport under Vuetify 4's taller nav and tucked the breadcrumb under it
+   (#1481). Panes scroll internally, so an exact fit keeps everything on screen. */
 .fc-ex {
   display: flex; flex-direction: column;
-  height: calc(100vh - 64px);
+  height: calc(100vh - var(--fc-nav-h, 64px));
   min-height: 0;
 }
 

frontend/src/views/SeriesView.vue

@@ -299,7 +299,7 @@ onMounted(() => {
    band (operator 2026-07-13). */
 .fc-series__head {
   position: sticky;
-  top: 64px;
+  top: var(--fc-nav-h, 64px); /* pins at the nav's real measured bottom (#1481) */
   z-index: 4;
   padding-bottom: 12px;
 }

frontend/src/views/SettingsView.vue

@@ -11,7 +11,7 @@
          continues the nav's gradient across the strip (operator 2026-07-13). -->
     <v-tabs
       v-model="tab" color="accent" class="mb-4 fc-chrome-continues"
-      style="position: sticky; top: 64px; z-index: 4;"
+      style="position: sticky; top: var(--fc-nav-h, 64px); z-index: 4;"
     >
       <v-tab value="overview">Overview</v-tab>
       <v-tab value="activity">Activity</v-tab>

frontend/src/views/SubscriptionsView.vue

@@ -55,8 +55,8 @@ const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
   /* 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);
+     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;