From 3cc962f45441feb3ce3a9c3ca96b4f61c2aa6d71 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sun, 25 Jan 2026 20:24:45 +0100
Subject: [PATCH] refactor: reduce DOM nesting and simplify templates

- Remove nested .wrapper div in recipe page using CSS Grid with full-bleed background
- Consolidate multiplier forms in IngredientsPage into single form
- Simplify fermentation conditionals in InstructionsPage with optional chaining
- Use conditional rendering instead of visibility wrapper in Search
- Remove unnecessary dialog wrapper in TitleImgParallax
---
 src/lib/components/IngredientsPage.svelte     | 30 +++++-------
 src/lib/components/InstructionsPage.svelte    | 16 +++---
 src/lib/components/Search.svelte              |  4 +-
 src/lib/components/TitleImgParallax.svelte    | 12 ++---
 .../[name]/+page.svelte                       | 49 ++++++++++++-------
 5 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/src/lib/components/IngredientsPage.svelte b/src/lib/components/IngredientsPage.svelte
index ef0de56..b3aa55c 100644
--- a/src/lib/components/IngredientsPage.svelte
+++ b/src/lib/components/IngredientsPage.svelte
@@ -400,24 +400,16 @@ font-family: sans-serif;
 {/if}
 
 <h3>{labels.adjustAmount}</h3>
-<div class=multipliers>
-	{#each multiplierOptions as opt}
-		<form method="get" style="display: inline;">
-			<input type="hidden" name="multiplier" value={opt.value} />
-			{#each Array.from(currentParams.entries()) as [key, value]}
-				{#if key !== 'multiplier'}
-					<input type="hidden" name={key} {value} />
-				{/if}
-			{/each}
-			<button type="submit" class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
-		</form>
+<form method="get" class="multipliers">
+	{#each Array.from(currentParams.entries()) as [key, value]}
+		{#if key !== 'multiplier'}
+			<input type="hidden" name={key} {value} />
+		{/if}
 	{/each}
-	<form method="get" style="display: inline;" class="custom-multiplier g-pill g-btn-light g-interactive" onsubmit={handleCustomSubmit}>
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} {value} />
-			{/if}
-		{/each}
+	{#each multiplierOptions as opt}
+		<button type="submit" name="multiplier" value={opt.value} class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
+	{/each}
+	<span class="custom-multiplier g-pill g-btn-light g-interactive">
 		<input
 			type="text"
 			name="multiplier"
@@ -429,8 +421,8 @@ font-family: sans-serif;
 			oninput={handleCustomInput}
 		/>
 		<button type="submit" class="custom-button">x</button>
-	</form>
-</div>
+	</span>
+</form>
 
 <h2>{labels.ingredients}</h2>
 {#each flattenedIngredients as list, listIndex}
diff --git a/src/lib/components/InstructionsPage.svelte b/src/lib/components/InstructionsPage.svelte
index 5b56eb6..9098dfc 100644
--- a/src/lib/components/InstructionsPage.svelte
+++ b/src/lib/components/InstructionsPage.svelte
@@ -162,17 +162,15 @@ h3{
 {/if}
 
 
-{#if data.fermentation}
-	{#if data.fermentation.bulk}
-		<div><h3>{labels.bulkFermentation}</h3>{data.fermentation.bulk}</div>
-	{/if}
-
-	{#if data.fermentation.final}
-		<div><h3>{labels.finalProof}</h3> {data.fermentation.final}</div>
-	{/if}
+{#if data.fermentation?.bulk}
+	<div><h3>{labels.bulkFermentation}</h3>{data.fermentation.bulk}</div>
 {/if}
 
-{#if data.baking.temperature}
+{#if data.fermentation?.final}
+	<div><h3>{labels.finalProof}</h3> {data.fermentation.final}</div>
+{/if}
+
+{#if data.baking?.temperature}
 <div><h3>{labels.baking}</h3> {data.baking.length} {labels.at} {data.baking.temperature} °C {data.baking.mode}</div>
 {/if}
 
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 638a2f5..8b210ba 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -387,7 +387,7 @@ scale: 0.8 0.8;
   </button>
 </form>
 
-<div style="visibility: {showFilters ? 'visible' : 'hidden'}; pointer-events: {showFilters ? 'auto' : 'none'};">
+{#if showFilters}
   <FilterPanel
     availableCategories={categories}
     {availableTags}
@@ -408,4 +408,4 @@ scale: 0.8 0.8;
     onFavoritesToggle={handleFavoritesToggle}
     onLogicModeToggle={handleLogicModeToggle}
   />
-</div>
+{/if}
diff --git a/src/lib/components/TitleImgParallax.svelte b/src/lib/components/TitleImgParallax.svelte
index cab3129..44ac27e 100644
--- a/src/lib/components/TitleImgParallax.svelte
+++ b/src/lib/components/TitleImgParallax.svelte
@@ -110,8 +110,8 @@
 	background-size: cover;
 	background-position: 50% 20%;
 	position: absolute;
-        width: min(1000px, 100dvw);
-  	height: max(60dvh,600px);
+	width: min(1000px, 100dvw);
+	height: max(60dvh,600px);
 	z-index: -2;
 }
 .placeholder_blur{
@@ -193,10 +193,8 @@ dialog button{
 </section>
 
 <dialog id=img_carousel>
-	<div>
 	<img class:unblur={isloaded} {src} {alt}>
-		<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
-	<Cross fill=white width=2rem height=2rem></Cross>
-		</button>
-	</div>
+	<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
+		<Cross fill=white width=2rem height=2rem></Cross>
+	</button>
 </dialog>
diff --git a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
index c513524..445a849 100644
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -146,32 +146,45 @@ h2.section-label{
 }
 
 .wrapper_wrapper{
-	background-color: #fbf9f3;
+	--bg-color: #fbf9f3;
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	max-width: 1000px;
+	margin-inline: auto;
 	padding-top: 10rem;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	margin-bottom: 3rem;
 	transform: translateY(-7rem);
 	z-index: -2;
+	position: relative;
+}
+.wrapper_wrapper::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 100vw;
+	background-color: var(--bg-color);
+	z-index: -1;
+}
+.addendum, .date {
+	grid-column: 1 / -1;
+	justify-self: center;
 }
 @media (prefers-color-scheme: dark) {
 	.wrapper_wrapper{
-		background-color: var(--background-dark);
+		--bg-color: var(--background-dark);
 	}
 }
-
-.wrapper{
-	display: flex;
-	flex-direction: row;
-	max-width: 1000px;
-	justify-content: center;
-	margin-inline: auto;
-}
-
 @media screen and (max-width: 700px){
-	.wrapper{
-		flex-direction:column;
+	.wrapper_wrapper{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.wrapper_wrapper > :global(.ingredients),
+	.wrapper_wrapper > :global(.instructions) {
+		width: 100%;
 	}
 }
 .title{
@@ -213,7 +226,7 @@ h2{
 }
 .addendum{
 	max-width: 800px;
-	margin-inline: auto;
+	justify-self: center;
 	padding-inline: 2rem;
 }
 @media screen and (max-width: 800px){
@@ -327,10 +340,8 @@ h2{
 </div>
 
 <div class=wrapper_wrapper>
-<div class=wrapper>
 <IngredientsPage {data}></IngredientsPage>
 <InstructionsPage {data}></InstructionsPage>
-</div>
 <div class=addendum>
 {#if data.addendum}
 	{@html data.addendum}