From 864d8ce9dca6eacb28a2fb85af790de33d1aef2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 12 Mar 2026 11:00:12 +0100
Subject: [PATCH] fix: filter pills wrap on mobile, remove active border
 artifact

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/ui/filter-pills/filter-pills.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte b/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte
index efc3622..6de7350 100644
--- a/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte
+++ b/packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte
@@ -21,7 +21,13 @@
   } = $props();
 </script>
 
-<div class={cn("flex gap-2", scrollable && "overflow-x-auto pb-0.5 scrollbar-none", className)}>
+<div
+  class={cn(
+    "flex gap-2",
+    scrollable ? "flex-nowrap overflow-x-auto pb-0.5 scrollbar-none" : "flex-wrap",
+    className,
+  )}
+>
   {#each options as option (option.value)}
     <button
       type="button"
@@ -29,7 +35,7 @@
       class={cn(
         "whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200 cursor-pointer shrink-0",
         value === option.value
-          ? "bg-gradient-to-r from-primary to-accent text-white shadow-sm shadow-primary/30 border border-transparent"
+          ? "bg-gradient-to-r from-primary to-accent text-white shadow-sm shadow-primary/30"
           : "border border-primary/20 text-muted-foreground bg-background/50 hover:border-primary/50 hover:text-foreground hover:bg-background/80",
       )}
     >