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%; } +} 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" /> @@ -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));