From 38b43174ec9410a6d85563b87a49b2c8ea9f5eff Mon Sep 17 00:00:00 2001
From: mr-shortman <payblot@gmail.com>
Date: Sat, 15 Mar 2025 11:59:00 +0100
Subject: [PATCH] article filter bar mobile responsive

---
 src/components/article/article-filter-bar.tsx | 62 ++++++++++---------
 src/components/combobox.tsx                   |  3 -
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/components/article/article-filter-bar.tsx b/src/components/article/article-filter-bar.tsx
index 6731931..12462a3 100644
--- a/src/components/article/article-filter-bar.tsx
+++ b/src/components/article/article-filter-bar.tsx
@@ -54,7 +54,7 @@ function ArticleFilterBar({
     <>
       <div
         className={cn(
-          "flex w-full items-center justify-center gap-2 rounded-md border bg-background p-2",
+          "flex w-full flex-col-reverse items-center justify-center gap-2 rounded-md border bg-background p-2 lg:flex-row lg:gap-4",
           className,
         )}
       >
@@ -70,35 +70,37 @@ function ArticleFilterBar({
             placeholder="Artikel Suche..."
           />
         </div>
-        <CategorySelect
-          className="w-full max-w-xs"
-          onSelect={(category) => {
-            onFilterChange({
-              category: category?.length ? category : undefined,
-            });
-          }}
-          buttonProps={{
-            size: "sm",
-          }}
-        />
-        <Combobox
-          hideSearch
-          data={sortItems}
-          initialValue={filter.sort}
-          onSelect={(currentValue) => {
-            onFilterChange({
-              sort: currentValue?.length ? currentValue : undefined,
-            });
-          }}
-          className="w-full max-w-64"
-          messageUi={{
-            selectIcon: FilterIcon,
-            select: "Sortieren",
-          }}
-          buttonProps={{
-            size: "sm",
-          }}
-        />
+        <div className="flex w-full flex-col gap-2 sm:flex-row">
+          <CategorySelect
+            className="w-full"
+            onSelect={(category) => {
+              onFilterChange({
+                category: category?.length ? category : undefined,
+              });
+            }}
+            buttonProps={{
+              size: "sm",
+            }}
+          />
+          <Combobox
+            hideSearch
+            data={sortItems}
+            initialValue={filter.sort}
+            onSelect={(currentValue) => {
+              onFilterChange({
+                sort: currentValue?.length ? currentValue : undefined,
+              });
+            }}
+            className="w-full"
+            messageUi={{
+              selectIcon: FilterIcon,
+              select: "Sortieren",
+            }}
+            buttonProps={{
+              size: "sm",
+            }}
+          />
+        </div>
       </div>
     </>
   );
diff --git a/src/components/combobox.tsx b/src/components/combobox.tsx
index 1cedcf0..b7534cd 100644
--- a/src/components/combobox.tsx
+++ b/src/components/combobox.tsx
@@ -121,9 +121,6 @@ export function Combobox({
                   <div className="flex items-center gap-2">
                     {item?.Icon && <item.Icon className="ml-auto opacity-50" />}
                     <span>{item.label}</span>
-                    {/* <span className="text-xs text-muted-foreground">
-                      {value === item.value && "ausgewählt"}
-                    </span> */}
                   </div>
                   <Check
                     className={cn(