From 13fd2143d94ee2062515e448e0882dc74f9248b3 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 17 Feb 2026 13:01:08 +0100
Subject: [PATCH] recipes: compact tag/category pills with fluid scaling, add
 tag search

Shrink TagBall font/padding and TagCloud gap using clamp() for
fluid sizing across viewports. Add search input on the tags page
to filter through keywords.
---
 src/lib/components/TagBall.svelte             |  4 +-
 src/lib/components/TagCloud.svelte            |  2 +-
 .../category/+page.svelte                     |  2 +-
 .../[recipeLang=recipeLang]/tag/+page.svelte  | 38 +++++++++++++++++--
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/TagBall.svelte b/src/lib/components/TagBall.svelte
index 6bbde6b..cbd3309 100644
--- a/src/lib/components/TagBall.svelte
+++ b/src/lib/components/TagBall.svelte
@@ -5,10 +5,10 @@ let { tag, ref } = $props<{ tag: string, ref: string }>();
 a{
 	background-color: var(--blue);
 	text-decoration: none;
-	padding: 2rem;
+	padding: clamp(0.4rem, 0.8vw, 0.8rem) clamp(0.8rem, 1.5vw, 1.5rem);
 	border-radius: 1000000px;
 	transition: var(--transition-fast);
-	font-size: 2rem;
+	font-size: clamp(0.85rem, 1.8vw, 1.5rem);
 	color: white;
 }
 a:hover{
diff --git a/src/lib/components/TagCloud.svelte b/src/lib/components/TagCloud.svelte
index c83041e..6b462bb 100644
--- a/src/lib/components/TagCloud.svelte
+++ b/src/lib/components/TagCloud.svelte
@@ -5,7 +5,7 @@ div{
 	flex-direction: row;
 	flex-wrap: wrap;
 	margin-inline:auto;
-	gap: 1rem;
+	gap: clamp(0.4rem, 1vw, 1rem);
 	justify-content: space-evenly;
 }
 </style>
diff --git a/src/routes/[recipeLang=recipeLang]/category/+page.svelte b/src/routes/[recipeLang=recipeLang]/category/+page.svelte
index 86b6a50..81678df 100644
--- a/src/routes/[recipeLang=recipeLang]/category/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/+page.svelte
@@ -17,7 +17,7 @@
 <style>
 	h1 {
 		text-align: center;
-		font-size: 3rem;
+		font-size: 1.5rem;
 	}
 </style>
 <h1>{labels.title}</h1>
diff --git a/src/routes/[recipeLang=recipeLang]/tag/+page.svelte b/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
index 8181a19..47a43b7 100644
--- a/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
@@ -7,8 +7,16 @@
     const isEnglish = $derived(data.lang === 'en');
     const labels = $derived({
         title: isEnglish ? 'Keywords' : 'Stichwörter',
-        siteTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte'
+        siteTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte',
+        search: isEnglish ? 'Search tags...' : 'Tags suchen...'
     });
+
+    let query = $state('');
+    const filteredTags = $derived(
+        query
+            ? data.tags.filter(t => t.toLowerCase().includes(query.toLowerCase()))
+            : data.tags
+    );
 </script>
 
 <svelte:head>
@@ -16,14 +24,38 @@
 </svelte:head>
 <style>
 	h1 {
-		font-size: 3rem;
+		font-size: 1.5rem;
 		text-align: center;
 	}
+	.search-wrap {
+		max-width: 400px;
+		margin: 0 auto 1rem;
+		padding-inline: 1rem;
+	}
+	input {
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--nord4);
+		border-radius: var(--radius-pill, 999px);
+		font-size: 0.9rem;
+		background: var(--nord6, #eceff4);
+		color: var(--nord0);
+	}
+	@media (prefers-color-scheme: dark) {
+		input {
+			background: var(--nord1);
+			border-color: var(--nord3);
+			color: var(--nord6);
+		}
+	}
 </style>
 <h1>{labels.title}</h1>
+<div class="search-wrap">
+	<input type="search" placeholder={labels.search} bind:value={query} />
+</div>
 <section>
 <TagCloud>
-{#each data.tags as tag}
+{#each filteredTags as tag}
 	<TagBall {tag} ref="/{data.recipeLang}/tag">
 	</TagBall>
 {/each}