From 505d59b8137b4073b28cf2fd0440dc3e3e7fa1da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 12 Mar 2026 17:09:58 +0100
Subject: [PATCH] fix: fix pill overflow on mobile, increase input-to-filter
 gap, reduce cards top padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../src/lib/components/ui/filter-pills/filter-pills.svelte  | 2 +-
 packages/frontend/src/routes/magazine/+page.svelte          | 6 ++----
 packages/frontend/src/routes/models/+page.svelte            | 5 ++---
 packages/frontend/src/routes/videos/+page.svelte            | 6 ++----
 4 files changed, 7 insertions(+), 12 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 d431972..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
@@ -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,
   )}
 >
diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 2596c5e..0180b2d 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/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
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index 410801a..76cab2c 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/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">
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index 2a376dd..97af4f7 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/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">