From 5ffd2773b090fa222f00f1e539cf941c815fdc80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 12 Mar 2026 10:27:42 +0100
Subject: [PATCH] polish: match FAQ search width (max-w-2xl) and input styling
 (h-14, text-lg, bg-card/50)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/routes/magazine/+page.svelte | 6 +++---
 packages/frontend/src/routes/models/+page.svelte   | 6 +++---
 packages/frontend/src/routes/videos/+page.svelte   | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 3ebe5bb..c8cd2c6 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -60,11 +60,11 @@
   <SexyBackground />
 
   <PageHero title={$_("magazine.title")} description={$_("magazine.description")}>
-    <div class="flex flex-col gap-3 max-w-4xl mx-auto">
+    <div class="flex flex-col gap-3 max-w-2xl mx-auto">
       <!-- Search -->
       <div class="relative">
         <span
-          class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
+          class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
         ></span>
         <Input
           placeholder={$_("magazine.search_placeholder")}
@@ -73,7 +73,7 @@
             searchValue = (e.target as HTMLInputElement).value;
             debounceSearch(searchValue);
           }}
-          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
+          class="pl-12 h-14 text-lg bg-card/50 border-primary/20 focus:border-primary"
         />
       </div>
 
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index 7ecdccb..f4e0d69 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -53,11 +53,11 @@
   <SexyBackground />
 
   <PageHero title={$_("models.title")} description={$_("models.description")}>
-    <div class="flex flex-col gap-3 max-w-4xl mx-auto">
+    <div class="flex flex-col gap-3 max-w-2xl mx-auto">
       <!-- Search -->
       <div class="relative">
         <span
-          class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
+          class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
         ></span>
         <Input
           placeholder={$_("models.search_placeholder")}
@@ -66,7 +66,7 @@
             searchValue = (e.target as HTMLInputElement).value;
             debounceSearch(searchValue);
           }}
-          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
+          class="pl-12 h-14 text-lg bg-card/50 border-primary/20 focus:border-primary"
         />
       </div>
 
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index 04d0951..3293bee 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -56,11 +56,11 @@
   <SexyBackground />
 
   <PageHero title={$_("videos.title")} description={$_("videos.description")}>
-    <div class="flex flex-col gap-3 max-w-6xl mx-auto">
+    <div class="flex flex-col gap-3 max-w-2xl mx-auto">
       <!-- Search -->
       <div class="relative">
         <span
-          class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
+          class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
         ></span>
         <Input
           placeholder={$_("videos.search_placeholder")}
@@ -69,7 +69,7 @@
             searchValue = (e.target as HTMLInputElement).value;
             debounceSearch(searchValue);
           }}
-          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
+          class="pl-12 h-14 text-lg bg-card/50 border-primary/20 focus:border-primary"
         />
       </div>