From 4fd6d4cc29dc9a112ccd59836de7ecb300c57cc7 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 4 Jun 2026 09:26:56 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20mobile=20pass=202=20=E2=80=94=20Post?=
 =?UTF-8?q?s=20&=20Subscriptions=20filter=20bars?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PostsFilterBar didn't wrap and its artist/platform fields had inline
min-widths (240/180px) a media query can't override → horizontal overflow on
phones. Moved widths to classes, added flex-wrap, and <600px each field takes
a full-width row. SubscriptionsTab's status/search inline max-widths likewise
moved to classes; <600px they go full-width and the v-spacer is dropped so the
search isn't shoved around.

Verified as already-fine (sweep false positives, no change): PostCard (default
body is a stacked column; only goes row at container >=800px), SeriesReaderView
(already has a <=768px block: nav drawer 150px, quick-nav stacks). The
subscriptions v-data-table scrolls horizontally within its own wrapper, so it
doesn't widen the page — a true mobile card layout is a larger follow-up if
wanted.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/posts/PostsFilterBar.vue     | 12 ++++++++++--
 .../components/subscriptions/SubscriptionsTab.vue    | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/posts/PostsFilterBar.vue b/frontend/src/components/posts/PostsFilterBar.vue
index 34e0c01..d7639b1 100644
--- a/frontend/src/components/posts/PostsFilterBar.vue
+++ b/frontend/src/components/posts/PostsFilterBar.vue
@@ -13,7 +13,7 @@
       clearable
       no-filter
       return-object
-      style="min-width: 240px"
+      class="fc-posts-filters__artist"
       @update:search="onArtistSearch"
       @update:model-value="onArtistPicked"
     />
@@ -25,7 +25,7 @@
       density="compact"
       hide-details
       clearable
-      style="min-width: 180px"
+      class="fc-posts-filters__platform"
       @update:model-value="emitFilters"
     />
 
@@ -135,6 +135,14 @@ watch(() => props.platform, (val) => {
   display: flex;
   gap: 0.75rem;
   align-items: center;
+  flex-wrap: wrap;
   padding-bottom: 1rem;
 }
+.fc-posts-filters__artist { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
+.fc-posts-filters__platform { min-width: 180px; flex: 1 1 180px; max-width: 240px; }
+/* Phones: each field takes a full-width row instead of overflowing. */
+@media (max-width: 600px) {
+  .fc-posts-filters__artist,
+  .fc-posts-filters__platform { min-width: 100%; max-width: none; flex-basis: 100%; }
+}
 </style>
diff --git a/frontend/src/components/subscriptions/SubscriptionsTab.vue b/frontend/src/components/subscriptions/SubscriptionsTab.vue
index 73cbb0b..cee737b 100644
--- a/frontend/src/components/subscriptions/SubscriptionsTab.vue
+++ b/frontend/src/components/subscriptions/SubscriptionsTab.vue
@@ -26,14 +26,14 @@
         :items="STATUS_OPTIONS"
         :disabled="needsAttention"
         density="compact" variant="outlined" hide-details
-        style="max-width: 180px"
+        class="fc-subs__status"
       />
       <v-text-field
         v-model="search"
         density="compact" variant="outlined" hide-details clearable
         prepend-inner-icon="mdi-magnify"
         placeholder="Search subscriptions"
-        style="max-width: 320px"
+        class="fc-subs__search"
       />
     </div>
 
@@ -568,6 +568,14 @@ async function bulkDelete() {
   padding: 8px 0 1rem;
 }
 .fc-subs__bar .v-chip { cursor: pointer; }
+.fc-subs__status { max-width: 180px; }
+.fc-subs__search { max-width: 320px; flex: 1 1 200px; }
+/* Phones: status + search each take a full-width row; drop the spacer that
+   would otherwise eat a row pushing them around. */
+@media (max-width: 600px) {
+  .fc-subs__status, .fc-subs__search { max-width: none; flex-basis: 100%; }
+  .fc-subs__bar :deep(.v-spacer) { display: none; }
+}
 .fc-subs__loading, .fc-subs__empty {
   display: flex; justify-content: center; padding: 2rem;
   color: rgb(var(--v-theme-on-surface-variant));