From 9150d1b8dac93ee3a66e3475895bd63a5896632c Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 8 Apr 2026 17:22:14 +0200
Subject: [PATCH] feat: two-column desktop layout for nutrition page

At 1024px+, nutrition page switches from single-column (600px max) to a
two-column grid: sticky sidebar (summary, goals, water) + scrollable
meals column. Mobile layout unchanged via display:contents fallback.
---
 package.json                                  |  2 +-
 .../[nutrition=fitnessNutrition]/+page.svelte | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c887492..2f5a66e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.14.2",
+	"version": "1.15.0",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte b/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
index dabe77a..907ecdd 100644
--- a/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
+++ b/src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
@@ -840,6 +840,7 @@
 		</button>
 	</div>
 
+	<div class="sidebar-col">
 	<!-- Daily Summary -->
 	{#if goalCalories}
 		<div class="daily-summary">
@@ -1273,7 +1274,10 @@
 		{/if}
 	</div>
 
+	</div>
+
 	<!-- Meal Sections -->
+	<div class="meals-col">
 	{#each mealTypes as meal, mi}
 		{@const mealEntries = grouped[meal]}
 		{@const mealCal = mealEntries.reduce((s, e) => s + entryCalories(e), 0)}
@@ -1381,6 +1385,7 @@
 			{/if}
 		</div>
 	{/each}
+	</div>
 
 </div>
 
@@ -1461,6 +1466,35 @@
 		flex-direction: column;
 		gap: 0.75rem;
 	}
+	.sidebar-col, .meals-col {
+		display: contents;
+	}
+	@media (min-width: 1024px) {
+		.nutrition-page {
+			max-width: 1100px;
+			display: grid;
+			grid-template-columns: minmax(320px, 380px) 1fr;
+			grid-template-rows: auto 1fr;
+			column-gap: 1.5rem;
+			align-items: start;
+		}
+		.date-nav {
+			grid-column: 1 / -1;
+		}
+		.sidebar-col {
+			display: flex;
+			flex-direction: column;
+			gap: 0.75rem;
+			position: sticky;
+			top: 1rem;
+		}
+		.meals-col {
+			display: flex;
+			flex-direction: column;
+			gap: 0.75rem;
+			min-width: 0;
+		}
+	}
 
 
 	/* ── Date Navigator ── */