From 2de51ee492e2af4c1eff65694956ee020bd4a2e3 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 5 Jan 2026 23:19:39 +0100
Subject: [PATCH] fix: eliminate layout shift in recipe search by reserving
 filter panel space

Changed FilterPanel from conditional rendering to always-rendered with visibility control. This prevents layout shift when JavaScript loads by reserving the space upfront while keeping it visually hidden for non-JS users.
---
 src/lib/components/Search.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index d244fd0..a7c2117 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -345,7 +345,7 @@ scale: 0.8 0.8;
   </button>
 </form>
 
-{#if showFilters}
+<div style="visibility: {showFilters ? 'visible' : 'hidden'}; pointer-events: {showFilters ? 'auto' : 'none'};">
   <FilterPanel
     availableCategories={categories}
     {availableTags}
@@ -363,4 +363,4 @@ scale: 0.8 0.8;
     onSeasonChange={handleSeasonChange}
     onFavoritesToggle={handleFavoritesToggle}
   />
-{/if}
+</div>