fix: fix pill overflow on mobile, increase input-to-filter gap, reduce cards top padding

- Remove scrollable from public pages (overflow-hidden ancestors break it)
- gap-3 → gap-5 between search input and filter rows
- py-12 → pt-6 pb-12 on cards container to reduce hero-to-grid gap

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 py-1 scrollbar-none" : "flex-wrap py-1",
+    scrollable ? "flex-nowrap overflow-x-auto pb-0.5 scrollbar-none" : "flex-wrap",
     className,
   )}
 >

packages/frontend/src/routes/magazine/+page.svelte

@@ -60,7 +60,7 @@
   <SexyBackground />
 
   <PageHero title={$_("magazine.title")} description={$_("magazine.description")}>
-    <div class="flex flex-col gap-3 max-w-2xl mx-auto">
+    <div class="flex flex-col gap-5 max-w-2xl mx-auto">
       <!-- Search -->
       <div class="relative">
         <span
@@ -79,7 +79,6 @@
 
       <!-- Category -->
       <FilterPills
-        scrollable
         value={data.category ?? "all"}
         options={[
           { value: "all", label: $_("magazine.categories.all") },
@@ -95,7 +94,6 @@
 
       <!-- Sort -->
       <FilterPills
-        scrollable
         value={data.sort ?? "recent"}
         options={[
           { value: "recent", label: $_("magazine.sort.recent") },
@@ -107,7 +105,7 @@
     </div>
   </PageHero>
 
-  <div class="container mx-auto px-4 py-12">
+  <div class="container mx-auto px-4 pt-6 pb-12">
     <!-- Featured Article -->
     {#if featuredArticle}
       <Card

packages/frontend/src/routes/models/+page.svelte

@@ -53,7 +53,7 @@
   <SexyBackground />
 
   <PageHero title={$_("models.title")} description={$_("models.description")}>
-    <div class="flex flex-col gap-3 max-w-2xl mx-auto">
+    <div class="flex flex-col gap-5 max-w-2xl mx-auto">
       <!-- Search -->
       <div class="relative">
         <span
@@ -72,7 +72,6 @@
 
       <!-- Sort -->
       <FilterPills
-        scrollable
         value={data.sort ?? "name"}
         options={[
           { value: "name", label: $_("models.sort.name") },
@@ -83,7 +82,7 @@
     </div>
   </PageHero>
   <!-- Models Grid -->
-  <div class="container mx-auto px-4 py-12">
+  <div class="container mx-auto px-4 pt-6 pb-12">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {#each data.items as model (model.slug)}
         <a href="/models/{model.slug}" class="block group">

packages/frontend/src/routes/videos/+page.svelte

@@ -56,7 +56,7 @@
   <SexyBackground />
 
   <PageHero title={$_("videos.title")} description={$_("videos.description")}>
-    <div class="flex flex-col gap-3 max-w-2xl mx-auto">
+    <div class="flex flex-col gap-5 max-w-2xl mx-auto">
       <!-- Search -->
       <div class="relative">
         <span
@@ -75,7 +75,6 @@
 
       <!-- Duration -->
       <FilterPills
-        scrollable
         value={data.duration ?? "all"}
         options={[
           { value: "all", label: $_("videos.duration.all") },
@@ -88,7 +87,6 @@
 
       <!-- Sort -->
       <FilterPills
-        scrollable
         value={data.sort ?? "recent"}
         options={[
           { value: "recent", label: $_("videos.sort.recent") },
@@ -101,7 +99,7 @@
     </div>
   </PageHero>
   <!-- Videos Grid -->
-  <div class="container mx-auto px-4 py-12">
+  <div class="container mx-auto px-4 pt-6 pb-12">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {#each data.items as video (video.slug)}
         <a href={`/videos/${video.slug}`} class="block group">