From 67c7ca86034bb0c29a91b3580920c55c28c5f4b4 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 13 Jul 2026 15:27:37 -0400
Subject: [PATCH] fix(ui): measure real nav height (--fc-nav-h), stop Explore
 breadcrumb tucking under nav (#1481)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/components/TopNav.vue            | 24 ++++++++++++++++---
 .../components/gallery/GalleryFilterBar.vue   |  2 +-
 frontend/src/styles/app.css                   |  7 ++++++
 frontend/src/views/BrowseView.vue             |  2 +-
 frontend/src/views/ExploreView.vue            |  7 ++++--
 frontend/src/views/SeriesView.vue             |  2 +-
 frontend/src/views/SettingsView.vue           |  2 +-
 frontend/src/views/SubscriptionsView.vue      |  4 ++--
 8 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/TopNav.vue b/frontend/src/components/TopNav.vue
index eaaedd6..1b1efbd 100644
--- a/frontend/src/components/TopNav.vue
+++ b/frontend/src/components/TopNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="fc-topnav" :class="{ 'fc-topnav--chrome': hasStickyChrome }">
+  <header ref="navEl" class="fc-topnav" :class="{ 'fc-topnav--chrome': hasStickyChrome }">
     <div class="fc-nav-left">
       <RouterLink :to="FRONT_DOOR" class="fc-brand" aria-label="FabledCurator home">
         <img src="/favicon.svg" alt="" class="fc-brand__glyph" width="22" height="22" />
@@ -64,14 +64,32 @@
 </template>
 
 <script setup>
-import { computed, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import router, { FRONT_DOOR } from '../router.js'
 import { useSystemStore } from '../stores/system.js'
 import PipelineStatusChip from './PipelineStatusChip.vue'
 
 const system = useSystemStore()
-onMounted(() => system.refreshHealth())
+
+// Publish the nav's REAL height as --fc-nav-h so full-height workspaces
+// (Explore/Subscriptions) and sticky sub-headers pin to it exactly instead of a
+// hardcoded 64px that Vuetify 4's MD3 sizing broke — the Explore breadcrumb was
+// tucking under a taller nav (#1481). ResizeObserver keeps it live as the nav
+// reflows (per-view teleported actions, mobile breakpoint, chip state changes).
+const navEl = ref(null)
+let navRO = null
+onMounted(() => {
+  system.refreshHealth()
+  if (navEl.value && 'ResizeObserver' in window) {
+    navRO = new ResizeObserver(() => {
+      const h = navEl.value?.offsetHeight
+      if (h) document.documentElement.style.setProperty('--fc-nav-h', `${h}px`)
+    })
+    navRO.observe(navEl.value)
+  }
+})
+onBeforeUnmount(() => { navRO?.disconnect() })
 
 // Views that pin a sticky sub-header (filter bar / tabs) directly under the nav
 // declare `meta.stickyChrome`. On those, the nav doesn't fade to transparent at
diff --git a/frontend/src/components/gallery/GalleryFilterBar.vue b/frontend/src/components/gallery/GalleryFilterBar.vue
index 64cdf0c..f8dde94 100644
--- a/frontend/src/components/gallery/GalleryFilterBar.vue
+++ b/frontend/src/components/gallery/GalleryFilterBar.vue
@@ -306,7 +306,7 @@ function pushFilter(mutate) {
    frosted block pinned directly under the 64px TopNav and continuous with it. */
 .fc-filterbar-wrap {
   position: sticky;
-  top: 64px;
+  top: var(--fc-nav-h, 64px); /* pins at the nav's real measured bottom (#1481) */
   z-index: 5;
   /* Attach to the TopNav: cancel the v-container's top padding (pt-2 = 8px)
      so the bar sits flush at 64px even at scroll 0 — without this it detaches
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index b29fb0f..7d210a4 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -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
diff --git a/frontend/src/views/BrowseView.vue b/frontend/src/views/BrowseView.vue
index 703ff59..0d2d87d 100644
--- a/frontend/src/views/BrowseView.vue
+++ b/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). */
diff --git a/frontend/src/views/ExploreView.vue b/frontend/src/views/ExploreView.vue
index 74a2650..e352b99 100644
--- a/frontend/src/views/ExploreView.vue
+++ b/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;
 }
 
diff --git a/frontend/src/views/SeriesView.vue b/frontend/src/views/SeriesView.vue
index f9038b3..f69f74b 100644
--- a/frontend/src/views/SeriesView.vue
+++ b/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;
 }
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index aa24389..21fa1db 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/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>
diff --git a/frontend/src/views/SubscriptionsView.vue b/frontend/src/views/SubscriptionsView.vue
index 714db3a..5655a7c 100644
--- a/frontend/src/views/SubscriptionsView.vue
+++ b/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;