From 3e1303ea3c3b01524273be5ea74bbaa7f1e64e3f Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 12 Jun 2026 00:25:03 -0400
Subject: [PATCH] fix(browse): put tabs and search on one row

Operator-asked: the tab strip and search field were stacked; place them
side-by-side in a single flex bar (tabs left, search + scope chips right),
wrapping to two rows only on narrow viewports.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/BrowseView.vue | 81 +++++++++++++++++++------------
 1 file changed, 50 insertions(+), 31 deletions(-)

diff --git a/frontend/src/views/BrowseView.vue b/frontend/src/views/BrowseView.vue
index 498d5c0..ec9efb5 100644
--- a/frontend/src/views/BrowseView.vue
+++ b/frontend/src/views/BrowseView.vue
@@ -9,37 +9,45 @@
          under it (matches SettingsView's sticky tabs). -->
     <div class="fc-browse__head">
       <v-container fluid class="py-0">
-        <v-tabs v-model="tab" density="compact" color="accent">
-          <v-tab value="posts">Posts</v-tab>
-          <v-tab value="artists">Artists</v-tab>
-          <v-tab value="tags">Tags</v-tab>
-        </v-tabs>
+        <!-- Tabs and search share one row: the axis switcher on the left, the
+             search field + active-scope chips on the right (operator-asked
+             2026-06-12). Wraps to two rows only on narrow viewports. -->
+        <div class="fc-browse__bar">
+          <v-tabs
+            v-model="tab" density="compact" color="accent"
+            class="fc-browse__tabs"
+          >
+            <v-tab value="posts">Posts</v-tab>
+            <v-tab value="artists">Artists</v-tab>
+            <v-tab value="tags">Tags</v-tab>
+          </v-tabs>
 
-        <div class="fc-browse__search">
-          <v-text-field
-            v-model="searchInput"
-            density="compact" variant="outlined" hide-details clearable
-            prepend-inner-icon="mdi-magnify"
-            :placeholder="searchPlaceholder"
-            :aria-label="searchPlaceholder"
-            class="fc-browse__search-field"
-          />
-          <!-- Posts search stays scoped to the active artist/platform filter
-               (operator-asked: 'if an artist is currently filtered in view').
-               The chips surface that scope next to the search even after the
-               PostsFilterBar scrolls off, and clear it to broaden. -->
-          <template v-if="tab === 'posts'">
-            <v-chip
-              v-if="artistId != null" closable size="small"
-              variant="tonal" color="accent" prepend-icon="mdi-account"
-              @click:close="clearFilter('artist_id')"
-            >{{ artistChipLabel }}</v-chip>
-            <v-chip
-              v-if="platform" closable size="small"
-              variant="tonal" color="accent" prepend-icon="mdi-web"
-              @click:close="clearFilter('platform')"
-            >{{ platform }}</v-chip>
-          </template>
+          <div class="fc-browse__search">
+            <v-text-field
+              v-model="searchInput"
+              density="compact" variant="outlined" hide-details clearable
+              prepend-inner-icon="mdi-magnify"
+              :placeholder="searchPlaceholder"
+              :aria-label="searchPlaceholder"
+              class="fc-browse__search-field"
+            />
+            <!-- Posts search stays scoped to the active artist/platform filter
+                 (operator-asked: 'if an artist is currently filtered in view').
+                 The chips surface that scope next to the search even after the
+                 PostsFilterBar scrolls off, and clear it to broaden. -->
+            <template v-if="tab === 'posts'">
+              <v-chip
+                v-if="artistId != null" closable size="small"
+                variant="tonal" color="accent" prepend-icon="mdi-account"
+                @click:close="clearFilter('artist_id')"
+              >{{ artistChipLabel }}</v-chip>
+              <v-chip
+                v-if="platform" closable size="small"
+                variant="tonal" color="accent" prepend-icon="mdi-web"
+                @click:close="clearFilter('platform')"
+              >{{ platform }}</v-chip>
+            </template>
+          </div>
         </div>
       </v-container>
     </div>
@@ -150,12 +158,23 @@ function clearFilter(key) {
   z-index: 4;
   background: rgb(var(--v-theme-surface));
 }
+.fc-browse__bar {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  padding: 8px 0;
+}
+.fc-browse__tabs {
+  flex: 0 0 auto;
+  width: auto;
+}
 .fc-browse__search {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
-  padding: 10px 0 12px;
+  flex: 1 1 320px;
 }
 .fc-browse__search-field {
   max-width: 360px;
-- 
2.52.0