From 58b3d4b478fad359350e6bb04701ce27c32b6629 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 20 Apr 2026 23:03:41 +0200
Subject: [PATCH] fix(fitness): fit body-parts wizard to viewport and tint
 thigh SVG

Cap shell height to viewport minus header so the bottombar stays visible,
allow the stage to scroll internally, and swap the thigh diagram to a
mask-tinted SVG that tracks the text-primary color across themes.
---
 package.json                                  |  2 +-
 .../body-parts/+page.svelte                   | 54 +++++++++++--------
 static/fitness/measure/thigh.svg              | 13 +++++
 3 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 static/fitness/measure/thigh.svg

diff --git a/package.json b/package.json
index d4dc3895..f69ee3c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.37.1",
+	"version": "1.37.2",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte b/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte
index 60edfc8b..c3450c82 100644
--- a/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte
+++ b/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte
@@ -24,7 +24,7 @@
 		{ key: 'forearms',  labelKey: 'l_forearm', img: null,            paired: true,  tipKey: 'measure_tip_forearms',  dbLeft: 'leftForearm', dbRight: 'rightForearm' },
 		{ key: 'waist',     labelKey: 'waist',     img: 'waist.png',     paired: false, tipKey: 'measure_tip_waist',     dbSingle: 'waist' },
 		{ key: 'hips',      labelKey: 'hips',      img: 'hips.png',      paired: false, tipKey: 'measure_tip_hips',      dbSingle: 'hips' },
-		{ key: 'thighs',    labelKey: 'l_thigh',   img: 'thigh.png',     paired: true,  tipKey: 'measure_tip_thighs',    dbLeft: 'leftThigh',   dbRight: 'rightThigh' },
+		{ key: 'thighs',    labelKey: 'l_thigh',   img: 'thigh.svg',     paired: true,  tipKey: 'measure_tip_thighs',    dbLeft: 'leftThigh',   dbRight: 'rightThigh' },
 		{ key: 'calves',    labelKey: 'calves',    img: 'calves.png',    paired: true,  tipKey: 'measure_tip_calves',    dbLeft: 'leftCalf',    dbRight: 'rightCalf' }
 	];
 
@@ -347,7 +347,16 @@
 				<section class="card" in:fly={flyOpts}>
 					<div class="hero">
 						{#if step.img}
-							<img src="/fitness/measure/{step.img}" alt="" class="hero-pic" />
+							{#if step.img.endsWith('.svg')}
+								<div
+									class="hero-pic hero-svg"
+									style="--hero-svg-src: url(/fitness/measure/{step.img})"
+									role="img"
+									aria-label={stepLabel(step)}
+								></div>
+							{:else}
+								<img src="/fitness/measure/{step.img}" alt="" class="hero-pic" />
+							{/if}
 						{:else}
 							<div class="hero-placeholder" aria-hidden="true">
 								<Ruler size={72} strokeWidth={1.4} />
@@ -578,11 +587,12 @@
 	}
 
 	.shell {
-		min-height: 100vh;
+		--fitness-header-offset: calc(3rem + 12px + env(safe-area-inset-top, 0px));
+		height: calc(100svh - var(--fitness-header-offset));
+		min-height: 0;
 		display: flex;
 		flex-direction: column;
 		background:
-			radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 60%),
 			radial-gradient(800px 400px at 90% 110%, color-mix(in oklab, var(--color-primary) 8%, transparent), transparent 55%),
 			var(--color-bg-primary);
 		color: var(--color-text-primary);
@@ -638,7 +648,8 @@
 		align-items: flex-start;
 		justify-content: center;
 		padding: 0.5rem 1rem 2rem;
-		overflow: hidden;
+		overflow-y: auto;
+		min-height: 0;
 	}
 	.card {
 		width: 100%;
@@ -661,25 +672,27 @@
 		box-shadow: var(--shadow-md);
 		position: relative;
 	}
-	.hero::after {
-		content: '';
-		position: absolute;
-		inset: -2px;
-		border-radius: 50%;
-		border: 1px dashed color-mix(in oklab, var(--color-primary) 45%, transparent);
-		opacity: 0.6;
-		pointer-events: none;
-	}
 	.hero-pic {
 		width: 150px;
 		height: 150px;
 		object-fit: contain;
 	}
-	@media (prefers-color-scheme: dark) {
-		.hero-pic { filter: invert(1); }
+	.hero-svg {
+		mask-image: var(--hero-svg-src);
+		-webkit-mask-image: var(--hero-svg-src);
+		mask-size: contain;
+		-webkit-mask-size: contain;
+		mask-repeat: no-repeat;
+		-webkit-mask-repeat: no-repeat;
+		mask-position: center;
+		-webkit-mask-position: center;
+		background-color: var(--color-text-primary);
 	}
-	:global(:root[data-theme="dark"]) .hero-pic { filter: invert(1); }
-	:global(:root[data-theme="light"]) .hero-pic { filter: none; }
+	@media (prefers-color-scheme: dark) {
+		img.hero-pic { filter: invert(1); }
+	}
+	:global(:root[data-theme="dark"]) img.hero-pic { filter: invert(1); }
+	:global(:root[data-theme="light"]) img.hero-pic { filter: none; }
 
 	.hero-placeholder {
 		display: flex;
@@ -977,15 +990,14 @@
 
 	@media (min-width: 1024px) {
 		.shell {
-			--fitness-header-offset: calc(3rem + 12px + env(safe-area-inset-top, 0px));
 			display: grid;
 			grid-template-columns: 260px minmax(0, 1fr) 360px;
-			grid-template-rows: auto 1fr auto;
+			grid-template-rows: auto minmax(0, 1fr) auto;
 			grid-template-areas:
 				"rail topbar panel"
 				"rail stage  panel"
 				"rail bottom panel";
-			min-height: 100vh;
+			height: 100vh;
 			margin-top: calc(-1 * var(--fitness-header-offset));
 		}
 		.rail   { grid-area: rail; }
diff --git a/static/fitness/measure/thigh.svg b/static/fitness/measure/thigh.svg
new file mode 100644
index 00000000..363e1879
--- /dev/null
+++ b/static/fitness/measure/thigh.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="230.97847mm"
+   height="161.57938mm"
+   viewBox="0 0 230.97847 161.57938"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(10.583333,-67.733332)" fill="none" stroke="currentColor" stroke-width="7.9375" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m -5.2938776,75.349546 c 0,0 37.0210826,-4.638254 65.9220826,-3.451251 16.254828,0.667607 16.716356,0.857996 37.092959,6.092661 20.583856,5.287909 30.187556,12.829711 52.828226,19.244569 22.64067,6.414855 47.35673,7.358215 58.11105,22.263325 10.75432,14.90511 4.33946,48.11142 4.33946,48.11142 0,0 4.7168,25.47075 3.01875,35.47038 -1.69804,9.99963 -4.7168,22.26332 -4.7168,22.26332" />
+    <path d="m -6.6145834,170.25168 c 0,0 19.8105854,15.09378 43.2059404,17.73519 23.395358,2.64141 79.431013,-10.1883 95.090803,-13.39573 15.6598,-3.20743 19.81059,1.88672 19.81059,1.88672 0,0 -6.7922,14.52776 -6.60353,28.86686 0.18867,14.33909 2.45274,19.62191 2.45274,19.62191" />
+    <path d="m 30.275732,127.2863 c 0,0 18.901817,1.34096 48.200862,10.32508 27.805246,8.52607 33.634316,12.94496 33.634316,12.94496" />
+  </g>
+</svg>