fix(browse): tabs and search on one row #99
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user