fix(browse): tabs and search on one row #99

Merged
bvandeusen merged 1 commits from dev into main 2026-06-12 00:28:38 -04:00
Showing only changes of commit 3e1303ea3c - Show all commits
+21 -2
View File
@@ -9,7 +9,14 @@
under it (matches SettingsView's sticky tabs). --> under it (matches SettingsView's sticky tabs). -->
<div class="fc-browse__head"> <div class="fc-browse__head">
<v-container fluid class="py-0"> <v-container fluid class="py-0">
<v-tabs v-model="tab" density="compact" color="accent"> <!-- 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="posts">Posts</v-tab>
<v-tab value="artists">Artists</v-tab> <v-tab value="artists">Artists</v-tab>
<v-tab value="tags">Tags</v-tab> <v-tab value="tags">Tags</v-tab>
@@ -41,6 +48,7 @@
>{{ platform }}</v-chip> >{{ platform }}</v-chip>
</template> </template>
</div> </div>
</div>
</v-container> </v-container>
</div> </div>
@@ -150,12 +158,23 @@ function clearFilter(key) {
z-index: 4; z-index: 4;
background: rgb(var(--v-theme-surface)); 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 { .fc-browse__search {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 0 12px; flex: 1 1 320px;
} }
.fc-browse__search-field { .fc-browse__search-field {
max-width: 360px; max-width: 360px;