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:
2026-04-16 22:12:21 +02:00
parent 8774fff3e9
commit c18323de8e

View File

@@ -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 -->