valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: filter pills wrap on mobile, remove active border artifact

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-12 11:00:12 +01:00
parent af2e03244f
commit 864d8ce9dc
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte
View File

@@ -21,7 +21,13 @@
} = $props(); } = $props();
</script> </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)} {#each options as option (option.value)}
<button <button
type="button" type="button"
@@ -29,7 +35,7 @@
class={cn( class={cn(
"whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200 cursor-pointer shrink-0", "whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200 cursor-pointer shrink-0",
value === option.value 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", : "border border-primary/20 text-muted-foreground bg-background/50 hover:border-primary/50 hover:text-foreground hover:bg-background/80",
)} )}
> >