From 10dd3158fe697017b966893a3cfd279e88ec7c68 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 16 Feb 2026 15:23:02 +0100
Subject: [PATCH] recipes: filter panel does not create page overflow

---
 src/lib/components/recipes/FilterPanel.svelte   |  2 +-
 src/routes/[recipeLang=recipeLang]/+page.svelte | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/recipes/FilterPanel.svelte b/src/lib/components/recipes/FilterPanel.svelte
index 6e4505e..f774295 100644
--- a/src/lib/components/recipes/FilterPanel.svelte
+++ b/src/lib/components/recipes/FilterPanel.svelte
@@ -43,7 +43,7 @@
 <style>
 	.filter-wrapper {
 		width: 900px;
-		max-width: 95vw;
+		max-width: 80vw;
 		margin: 1rem auto 2rem;
 	}
 
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index 2e04077..e60c148 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -219,9 +219,6 @@
 .hero-featured:hover {
 	opacity: 1;
 }
-.hero-featured .icon {
-	font-family: "Noto Color Emoji", emoji, sans-serif;
-}
 .hero-featured .recipe-name {
 	font-weight: 600;
 }
@@ -379,8 +376,7 @@
 				<h1>{labels.title}</h1>
 				<p class="subheading">{labels.subheading}</p>
 				<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured">
-					<span class="icon">{heroRecipe.icon}</span>
-					<span class="recipe-name">{@html heroRecipe.name}</span>
+					<span class="recipe-name">{heroRecipe.icon} {@html heroRecipe.name}</span>
 					<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg>
 				</a>
 
@@ -452,12 +448,12 @@
 					<div class="sentinel" bind:this={sentinel}></div>
 				{/if}
 
-				{#if !isEnglish}
-					<AddButton href="/rezepte/add"></AddButton>
-				{/if}
 			</div>
 		</div>
 	</section>
+	{#if !isEnglish}
+		<AddButton href="/rezepte/add"></AddButton>
+	{/if}
 {:else}
 	<div class="hero-fallback">
 		<h1>{labels.title}</h1>