From c18323de8e230e1ce1a5e008f4e311e064fee0c6 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 22:12:21 +0200
Subject: [PATCH] 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>
---
 apps/app/src/pages/organisation/companies.vue | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/app/src/pages/organisation/companies.vue b/apps/app/src/pages/organisation/companies.vue
index 6b30554f..a7687344 100644
--- a/apps/app/src/pages/organisation/companies.vue
+++ b/apps/app/src/pages/organisation/companies.vue
@@ -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 -->