From 304e8aa8789e736f17f5cabd64d960426baf7b92 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 4 Jun 2026 09:06:33 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20mobile=20responsiveness=20=E2=80=94?=
 =?UTF-8?q?=20nav=20hamburger=20+=20primary-path=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The top nav packed brand + health + pipeline chip + ~7 inline links + an
action slot into one flex row, colliding/overflowing on phones (operator:
'almost unusable'). Below 768px the links now fold into a hamburger v-menu;
below 480px the brand text hides (glyph still brands). Plus the primary
browsing path:
- BulkEditorPanel: fixed 320px -> min(320px, 90vw) so it can't swallow the screen.
- GalleryFilterBar: <600px gives search its own full-width row (its 200px
  min-width was jamming the wrapping bar); sort grows.
- GalleryFacetPanel: <480px wraps groups + lets the side-by-side date inputs
  grow full-width.
- ArtistsView grid: minmax(min(440px,100%),1fr) so a card never overflows
  (single column on phones).
- GalleryView: hide the year/month timeline strip <600px.
ImageViewer already stacks its side panel below the image <900px (left as-is).

Secondary surfaces (Posts/Subscriptions filter bars, SubscriptionsTab table,
SeriesReader, PostCard) still need a mobile pass — follow-up.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/TopNav.vue            | 50 +++++++++++++++++--
 .../components/gallery/BulkEditorPanel.vue    |  4 +-
 .../components/gallery/GalleryFacetPanel.vue  |  7 +++
 .../components/gallery/GalleryFilterBar.vue   |  8 +++
 frontend/src/views/ArtistsView.vue            |  4 +-
 frontend/src/views/GalleryView.vue            |  5 ++
 6 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TopNav.vue b/frontend/src/components/TopNav.vue
index 07b5983..3800d8a 100644
--- a/frontend/src/components/TopNav.vue
+++ b/frontend/src/components/TopNav.vue
@@ -11,6 +11,8 @@
       <PipelineStatusChip />
     </div>
 
+    <!-- Desktop: inline links, centered. Hidden on mobile (see media query),
+         where they fold into the hamburger menu on the right. -->
     <nav class="fc-links">
       <RouterLink
         v-for="r in navRoutes"
@@ -20,9 +22,31 @@
       >{{ r.meta.title }}</RouterLink>
     </nav>
 
-    <!-- Per-view contextual actions teleport here (Showcase: Shuffle,
-         Gallery: Select). TopNav owns the slot, not its contents. -->
-    <div id="fc-nav-actions" class="fc-nav-actions" />
+    <div class="fc-nav-right">
+      <!-- Per-view contextual actions teleport here (Showcase: Shuffle,
+           Gallery: Select). TopNav owns the slot, not its contents. -->
+      <div id="fc-nav-actions" class="fc-nav-actions" />
+
+      <!-- Mobile nav: the link row collides with brand + actions below ~768px
+           (7+ links in one flex row), so collapse it into a menu. -->
+      <v-menu location="bottom end">
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            v-bind="menuProps"
+            icon="mdi-menu" variant="text" size="small"
+            class="fc-nav-burger" aria-label="Menu"
+          />
+        </template>
+        <v-list density="compact" min-width="180">
+          <v-list-item
+            v-for="r in navRoutes"
+            :key="r.name"
+            :to="{ name: r.name }"
+            :title="r.meta.title"
+          />
+        </v-list>
+      </v-menu>
+    </div>
   </header>
 </template>
 
@@ -137,7 +161,7 @@ const health = computed(() => {
   align-items: center;
   flex-shrink: 0;
 }
-.fc-nav-actions {
+.fc-nav-right {
   flex: 1 1 0;
   min-width: 0;
   display: flex;
@@ -145,4 +169,22 @@ const health = computed(() => {
   justify-content: flex-end;
   gap: 0.5rem;
 }
+.fc-nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+/* The hamburger only exists on mobile; the inline links carry desktop. */
+.fc-nav-burger { display: none; }
+
+@media (max-width: 768px) {
+  .fc-topnav { gap: 0.5rem; padding: 0.6rem 0.75rem; }
+  /* Fold the link row into the hamburger menu. */
+  .fc-links { display: none; }
+  .fc-nav-burger { display: inline-flex; }
+}
+@media (max-width: 480px) {
+  /* Reclaim width on the smallest phones — the glyph alone still brands. */
+  .fc-brand__text { display: none; }
+}
 </style>
diff --git a/frontend/src/components/gallery/BulkEditorPanel.vue b/frontend/src/components/gallery/BulkEditorPanel.vue
index 2f8e11e..e24b335 100644
--- a/frontend/src/components/gallery/BulkEditorPanel.vue
+++ b/frontend/src/components/gallery/BulkEditorPanel.vue
@@ -186,7 +186,9 @@ async function onDeleteConfirm(token) {
 <style scoped>
 .fc-bulk-panel {
   position: fixed; top: 0; right: 0;
-  width: 320px; height: 100vh; z-index: 1100;
+  /* min(320px, 90vw): on phones the panel never swallows the whole screen —
+     leaves a sliver of the gallery visible behind it. */
+  width: min(320px, 90vw); height: 100vh; z-index: 1100;
   background: rgb(var(--v-theme-surface));
   border-left: 1px solid rgb(var(--v-theme-surface-light));
   box-shadow: -2px 0 16px rgba(0, 0, 0, 0.4);
diff --git a/frontend/src/components/gallery/GalleryFacetPanel.vue b/frontend/src/components/gallery/GalleryFacetPanel.vue
index bb09916..94a6d02 100644
--- a/frontend/src/components/gallery/GalleryFacetPanel.vue
+++ b/frontend/src/components/gallery/GalleryFacetPanel.vue
@@ -143,4 +143,11 @@ onBeforeUnmount(() => { if (debounce) clearTimeout(debounce) })
 .fc-facets__empty { color: rgb(var(--v-theme-on-surface-variant)); font-size: 0.8rem; }
 .fc-facets__date { max-width: 160px; }
 .fc-facets__dash { color: rgb(var(--v-theme-on-surface-variant)); }
+
+/* Phones: let each facet group wrap and the side-by-side date inputs grow to
+   full width so they don't overflow a ~360px viewport. */
+@media (max-width: 480px) {
+  .fc-facets__group { flex-wrap: wrap; }
+  .fc-facets__date { max-width: none; flex: 1 1 9rem; }
+}
 </style>
diff --git a/frontend/src/components/gallery/GalleryFilterBar.vue b/frontend/src/components/gallery/GalleryFilterBar.vue
index f166b89..39c86ac 100644
--- a/frontend/src/components/gallery/GalleryFilterBar.vue
+++ b/frontend/src/components/gallery/GalleryFilterBar.vue
@@ -258,4 +258,12 @@ function pushFilter(mutate) {
 .fc-filterbar__search { max-width: 320px; min-width: 200px; }
 .fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 .fc-filterbar__sort { max-width: 150px; }
+
+/* Phones: the search's 200px min-width jams the wrapping bar. Give search its
+   own full-width row and let sort grow; everything else wraps under it. */
+@media (max-width: 600px) {
+  .fc-filterbar { gap: 8px; }
+  .fc-filterbar__search { min-width: 100%; max-width: none; }
+  .fc-filterbar__sort { max-width: none; flex: 1 1 auto; }
+}
 </style>
diff --git a/frontend/src/views/ArtistsView.vue b/frontend/src/views/ArtistsView.vue
index b79ca83..3e3c613 100644
--- a/frontend/src/views/ArtistsView.vue
+++ b/frontend/src/views/ArtistsView.vue
@@ -76,7 +76,9 @@ onMounted(async () => {
 }
 .fc-artists__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
+  /* min(440px, 100%) so a card never exceeds the viewport — on phones the
+     min-track collapses to 100% (single column) instead of overflowing. */
+  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
   gap: 12px;
 }
 .fc-artists__sentinel {
diff --git a/frontend/src/views/GalleryView.vue b/frontend/src/views/GalleryView.vue
index 62ddd12..fa64033 100644
--- a/frontend/src/views/GalleryView.vue
+++ b/frontend/src/views/GalleryView.vue
@@ -71,4 +71,9 @@ function openImage(id) {
   .fc-gallery-layout { flex-direction: column-reverse; }
   .fc-gallery-layout__sidebar { width: 100%; max-height: 200px; }
 }
+/* Phones: the year/month timeline strip eats vertical space and reads poorly
+   as a horizontal band — drop it; the gallery scroll is the primary nav here. */
+@media (max-width: 600px) {
+  .fc-gallery-layout__sidebar { display: none; }
+}
 </style>