From 74b361d45468373db213324cc9121efea672d090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 12 Mar 2026 17:07:12 +0100
Subject: [PATCH] fix: make all public page FilterPills scrollable on mobile,
 add vertical padding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/ui/filter-pills/filter-pills.svelte      | 2 +-
 packages/frontend/src/routes/magazine/+page.svelte              | 1 +
 packages/frontend/src/routes/models/+page.svelte                | 1 +
 packages/frontend/src/routes/videos/+page.svelte                | 2 ++
 4 files changed, 5 insertions(+), 1 deletion(-)

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 6de7350..d431972 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
@@ -24,7 +24,7 @@
 <div
   class={cn(
     "flex gap-2",
-    scrollable ? "flex-nowrap overflow-x-auto pb-0.5 scrollbar-none" : "flex-wrap",
+    scrollable ? "flex-nowrap overflow-x-auto py-1 scrollbar-none" : "flex-wrap py-1",
     className,
   )}
 >
diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 427340a..2596c5e 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -95,6 +95,7 @@
 
       <!-- Sort -->
       <FilterPills
+        scrollable
         value={data.sort ?? "recent"}
         options={[
           { value: "recent", label: $_("magazine.sort.recent") },
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index aa15b30..410801a 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -72,6 +72,7 @@
 
       <!-- Sort -->
       <FilterPills
+        scrollable
         value={data.sort ?? "name"}
         options={[
           { value: "name", label: $_("models.sort.name") },
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index 8d451c7..2a376dd 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -75,6 +75,7 @@
 
       <!-- Duration -->
       <FilterPills
+        scrollable
         value={data.duration ?? "all"}
         options={[
           { value: "all", label: $_("videos.duration.all") },
@@ -87,6 +88,7 @@
 
       <!-- Sort -->
       <FilterPills
+        scrollable
         value={data.sort ?? "recent"}
         options={[
           { value: "recent", label: $_("videos.sort.recent") },