From 906a54cd3d4792f632e318161d71a5efca4b69cb Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Mon, 25 May 2026 12:50:27 +0800
Subject: [PATCH] fix: adjust layout for gender and status filter comboboxes

---
 web/app/dashboard/customers/page.tsx | 30 ++++++++++++++++------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/app/dashboard/customers/page.tsx b/web/app/dashboard/customers/page.tsx
index a545e31..f434a87 100644
--- a/web/app/dashboard/customers/page.tsx
+++ b/web/app/dashboard/customers/page.tsx
@@ -274,14 +274,16 @@ export default function DashboardCustomersPage() {
             />
           </div>
 
-          <OptionCombobox
-            value={genderFilterInput}
-            options={genderOptions}
-            placeholder={getLabel(genderFilterInput, genderOptions, t("customer.select"))}
-            onChange={(v) => setGenderFilterInput(v)}
-          />
+          <div className="w-full sm:w-36">
+            <OptionCombobox
+              value={genderFilterInput}
+              options={genderOptions}
+              placeholder={getLabel(genderFilterInput, genderOptions, t("customer.select"))}
+              onChange={(v) => setGenderFilterInput(v)}
+            />
+          </div>
 
-          <div className="w-full xl:w-56">
+          <div className="w-full sm:w-56">
             <OptionCombobox
               value={companyFilterInput}
               options={companyOptions}
@@ -291,12 +293,14 @@ export default function DashboardCustomersPage() {
             />
           </div>
 
-          <OptionCombobox
-            value={statusFilterInput}
-            options={listStatusOptions}
-            placeholder={getLabel(statusFilterInput, listStatusOptions, t("customer.select"))}
-            onChange={(v) => setStatusFilterInput(v)}
-          />
+          <div className="w-full sm:w-36">
+            <OptionCombobox
+              value={statusFilterInput}
+              options={listStatusOptions}
+              placeholder={getLabel(statusFilterInput, listStatusOptions, t("customer.select"))}
+              onChange={(v) => setStatusFilterInput(v)}
+            />
+          </div>
 
           <Button variant="outline" onClick={applyFilters} disabled={loading}>
             <SearchIcon />