fix: make all public page FilterPills scrollable on mobile, add vertical padding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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,
   )}
 >

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") },

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") },

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") },