chore(companies): refactor filter row for responsive layout
- Wrap filter row so controls flow to a second line on narrow screens - Search field now flex-fills available width instead of fixed 300px - Type select: removed inline label, widened to 240px, prevented shrink with flex-shrink-0 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -156,21 +156,24 @@ function onSaved() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filters -->
|
<!-- Filters -->
|
||||||
<div class="d-flex gap-x-4 mb-4">
|
<div class="d-flex flex-wrap align-center gap-4 mb-4">
|
||||||
<AppTextField
|
<AppTextField
|
||||||
v-model="search"
|
v-model="search"
|
||||||
prepend-inner-icon="tabler-search"
|
prepend-inner-icon="tabler-search"
|
||||||
placeholder="Zoek op naam..."
|
placeholder="Zoek op naam..."
|
||||||
clearable
|
clearable
|
||||||
style="max-inline-size: 300px;"
|
class="min-w-0 flex-fill"
|
||||||
/>
|
|
||||||
<AppSelect
|
|
||||||
v-model="filterType"
|
|
||||||
label="Type"
|
|
||||||
:items="typeOptions"
|
|
||||||
clearable
|
|
||||||
style="min-inline-size: 180px;"
|
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
class="flex-shrink-0"
|
||||||
|
style="inline-size: min(100%, 240px);"
|
||||||
|
>
|
||||||
|
<AppSelect
|
||||||
|
v-model="filterType"
|
||||||
|
:items="typeOptions"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Empty state -->
|
<!-- Empty state -->
|
||||||
|
|||||||
Reference in New Issue
Block a user