From 6a49fbb9caff300a8282b581a32107715dbe8de4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 12 Mar 2026 10:23:25 +0100
Subject: [PATCH] polish: unify search/filter control size with FAQ (h-14,
 text-lg, larger icon)

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

diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index a0ccf45..3c46df9 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -64,7 +64,7 @@
       <!-- Search -->
       <div class="relative flex-1">
         <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-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
@@ -84,9 +84,9 @@
         onValueChange={(v) => v && setParam("category", v)}
       >
         <SelectTrigger
-          class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
+          class="w-full md:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
         >
-          <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
+          <span class="icon-[ri--filter-line] w-5 h-5 mr-2"></span>
           {!data.category
             ? $_("magazine.categories.all")
             : data.category === "photography"
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index 176f3a3..ddeac97 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -57,7 +57,7 @@
       <!-- Search -->
       <div class="relative flex-1">
         <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,14 +66,14 @@
             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-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
       <!-- Sort -->
       <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
         <SelectTrigger
-          class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
+          class="w-full md:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
         >
           {data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")}
         </SelectTrigger>
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index 9e1c8f4..13ee2d8 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -60,7 +60,7 @@
       <!-- Search -->
       <div class="relative flex-1">
         <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-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
@@ -80,9 +80,9 @@
         onValueChange={(v) => v && setParam("duration", v)}
       >
         <SelectTrigger
-          class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
+          class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
         >
-          <span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
+          <span class="icon-[ri--timer-2-line] w-5 h-5 mr-2"></span>
           {data.duration === "short"
             ? $_("videos.duration.short")
             : data.duration === "medium"
@@ -102,7 +102,7 @@
       <!-- Sort -->
       <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
         <SelectTrigger
-          class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
+          class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
         >
           {data.sort === "most_liked"
             ? $_("videos.sort.most_liked")