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