From ba5e08971d82f74f692b456fc1c1344b35782f7f Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 8 Apr 2026 16:25:53 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20desktop=20layout=20=E2=80=94=20macro=20?=
 =?UTF-8?q?split=20sidebar=20next=20to=20muscle=20heatmap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On desktop (≥1024px), protein/balance/adherence cards sit in a row above
the muscle heatmap, with the macro split card as a vertical sidebar on the
right spanning the full height. Includes ring/triangle legend for
actual vs target. Mobile layout unchanged.
---
 package.json                                  |  2 +-
 .../fitness/[stats=fitnessStats]/+page.svelte | 93 ++++++++++++++++---
 2 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 692f1c48..4ac6c9dc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.13.1",
+	"version": "1.13.2",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/routes/fitness/[stats=fitnessStats]/+page.svelte b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
index 5ed5e122..9e94d4ff 100644
--- a/src/routes/fitness/[stats=fitnessStats]/+page.svelte
+++ b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
@@ -265,8 +265,8 @@
 		/>
 	{/if}
 
-	{#if ns}
-		<div class="nutrition-grid">
+	<div class="muscle-nutrition-layout">
+		{#if ns}
 			<div class="lifetime-card protein-card">
 				<div class="card-icon"><Beef size={24} /></div>
 				{#if ns.avgProteinPerKg != null}
@@ -391,15 +391,25 @@
 								<span class="macro-label">{macro.label}</span>
 							</div>
 						{/each}
+					<div class="macro-legend">
+							<span class="macro-legend-item">
+								<svg viewBox="0 0 12 12" width="12" height="12"><circle cx="6" cy="6" r="4" fill="none" stroke="var(--color-text-secondary)" stroke-width="2"/></svg>
+								{lang === 'en' ? 'Actual' : 'Ist'}
+							</span>
+							<span class="macro-legend-item">
+								<svg viewBox="0 0 12 12" width="12" height="12"><path d="M6,2 L10,10 L2,10 Z" fill="var(--color-text-secondary)"/></svg>
+								{lang === 'en' ? 'Target' : 'Ziel'}
+							</span>
+						</div>
 					</div>
 				</div>
 			{/if}
-		</div>
-	{/if}
+		{/if}
 
-	<div class="section-block">
-		<h2 class="section-title">{t('muscle_balance', lang)}</h2>
-		<MuscleHeatmap data={data.muscleHeatmap} />
+		<div class="section-block muscle-heatmap-block">
+			<h2 class="section-title">{t('muscle_balance', lang)}</h2>
+			<MuscleHeatmap data={data.muscleHeatmap} />
+		</div>
 	</div>
 </div>
 
@@ -695,11 +705,38 @@
 	}
 
 	/* Nutrition masonry grid */
-	.nutrition-grid {
+	.muscle-nutrition-layout {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
+		grid-template-columns: 1fr 1fr 1fr;
 		gap: 0.6rem;
 	}
+	.muscle-nutrition-layout .muscle-heatmap-block {
+		grid-column: 1 / -1;
+	}
+	@media (min-width: 1024px) {
+		.muscle-nutrition-layout {
+			grid-template-columns: 1fr 1fr 1fr 1fr;
+			grid-template-rows: auto 1fr;
+		}
+		.muscle-nutrition-layout .macro-card {
+			grid-column: 4;
+			grid-row: 1 / 3;
+			flex-direction: column !important;
+			align-items: center !important;
+		}
+		.muscle-nutrition-layout .macro-card .macro-rings {
+			flex-direction: column;
+			align-items: center;
+			gap: 0.5rem;
+		}
+		.muscle-nutrition-layout .macro-card .macro-header {
+			text-align: center;
+			margin-bottom: 1.25rem;
+		}
+		.muscle-nutrition-layout .muscle-heatmap-block {
+			grid-column: 1 / 4;
+		}
+	}
 	.protein-card::before { background: var(--nord14); }
 	.balance-card::before { background: var(--color-text-secondary); }
 	.balance-card.surplus::before { background: var(--nord14); }
@@ -726,10 +763,10 @@
 		color: var(--nord13);
 		background: color-mix(in srgb, var(--nord13) 15%, transparent);
 	}
-	.nutrition-grid .card-icon {
+	.muscle-nutrition-layout .card-icon {
 		flex-shrink: 0;
 	}
-	.nutrition-grid .card-hint {
+	.muscle-nutrition-layout .card-hint {
 		display: block;
 		width: 100%;
 		text-align: center;
@@ -783,7 +820,7 @@
 		opacity: 0.5;
 	}
 
-	/* Macro split card — spans full row, horizontal layout */
+	/* Macro split card — spans full row on mobile, sidebar on desktop */
 	.macro-card {
 		grid-column: 1 / -1;
 		padding: 1rem 1.25rem;
@@ -791,6 +828,13 @@
 		align-items: center !important;
 		gap: 1.25rem !important;
 	}
+	@media (min-width: 1024px) {
+		.macro-card {
+			grid-column: auto;
+			padding: 0.75rem;
+			gap: 0.75rem !important;
+		}
+	}
 	.macro-header {
 		font-size: 1.15rem;
 		font-weight: 700;
@@ -855,9 +899,27 @@
 		font-size: 7px;
 		font-weight: 700;
 	}
+	.macro-legend {
+		display: none;
+	}
+	@media (min-width: 1024px) {
+		.macro-legend {
+			display: flex;
+			gap: 1rem;
+			justify-content: center;
+			margin-top: 0.75rem;
+			font-size: 0.7rem;
+			color: var(--color-text-secondary);
+		}
+		.macro-legend-item {
+			display: flex;
+			align-items: center;
+			gap: 0.3rem;
+		}
+	}
 
 	@media (max-width: 600px) {
-		.nutrition-grid {
+		.muscle-nutrition-layout {
 			grid-template-columns: repeat(3, 1fr);
 		}
 		.macro-card {
@@ -868,9 +930,12 @@
 		}
 	}
 	@media (max-width: 400px) {
-		.nutrition-grid {
+		.muscle-nutrition-layout {
 			grid-template-columns: 1fr;
 		}
+		.muscle-nutrition-layout .muscle-heatmap-block {
+			grid-column: 1;
+		}
 		.macro-card {
 			grid-column: 1;
 			flex-direction: column !important;