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>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="d-flex gap-x-4 mb-4">
|
||||
<div class="d-flex flex-wrap align-center gap-4 mb-4">
|
||||
<AppTextField
|
||||
v-model="search"
|
||||
prepend-inner-icon="tabler-search"
|
||||
placeholder="Zoek op naam..."
|
||||
clearable
|
||||
style="max-inline-size: 300px;"
|
||||
/>
|
||||
<AppSelect
|
||||
v-model="filterType"
|
||||
label="Type"
|
||||
:items="typeOptions"
|
||||
clearable
|
||||
style="min-inline-size: 180px;"
|
||||
class="min-w-0 flex-fill"
|
||||
/>
|
||||
<div
|
||||
class="flex-shrink-0"
|
||||
style="inline-size: min(100%, 240px);"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="filterType"
|
||||
:items="typeOptions"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
|
||||
Reference in New Issue
Block a user