fix: adjust layout for gender and status filter comboboxes

web/app/dashboard/customers/page.tsx

@@ -274,14 +274,16 @@ export default function DashboardCustomersPage() {
             />
           </div>
 
-          <OptionCombobox
+          <div className="w-full sm:w-36">
-            value={genderFilterInput}
+            <OptionCombobox
-            options={genderOptions}
+              value={genderFilterInput}
-            placeholder={getLabel(genderFilterInput, genderOptions, t("customer.select"))}
+              options={genderOptions}
-            onChange={(v) => setGenderFilterInput(v)}
+              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
+          <div className="w-full sm:w-36">
-            value={statusFilterInput}
+            <OptionCombobox
-            options={listStatusOptions}
+              value={statusFilterInput}
-            placeholder={getLabel(statusFilterInput, listStatusOptions, t("customer.select"))}
+              options={listStatusOptions}
-            onChange={(v) => setStatusFilterInput(v)}
+              placeholder={getLabel(statusFilterInput, listStatusOptions, t("customer.select"))}
-          />
+              onChange={(v) => setStatusFilterInput(v)}
+            />
+          </div>
 
           <Button variant="outline" onClick={applyFilters} disabled={loading}>
             <SearchIcon />