From 07554f16df3eec6578ef42ee5251abe19f75c001 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 9 Feb 2026 15:15:32 +0100
Subject: [PATCH] rosary: fix mystery image column clipping at edges

Use taller edge pads (100vh) for before/after targets so images don't
peek at viewport top or bottom. Scroll to edge pads with zero offset
so previous/next images hide fully behind the sticky header.
---
 .../[rosary=rosaryLang]/+page.svelte               | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
index 23e1f9c..25a9b26 100644
--- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
@@ -424,13 +424,18 @@ function scrollMysteryImage(targetY, duration = 1200) {
 }
 
 // Scroll the mystery image column to the relevant image
+const IMAGE_COL_HEADER_OFFSET = 6; // rem — keep images below the sticky header
 $effect(() => {
 	if (!mysteryImageContainer || !hasMysteryImages) return;
 	const targetName = getMysteryScrollTarget(activeSection);
 	const targetEl = mysteryImageContainer.querySelector(`[data-target="${targetName}"]`);
 	if (targetEl) {
-		const padding = parseFloat(getComputedStyle(mysteryImageContainer).paddingTop) || 0;
-		scrollMysteryImage(Math.max(0, targetEl.offsetTop - padding));
+		const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		// Edge pads (before/after): scroll flush so previous image hides behind the header
+		const offset = targetName === 'before' || targetName === 'after'
+			? 0
+			: rem * IMAGE_COL_HEADER_OFFSET;
+		scrollMysteryImage(Math.max(0, targetEl.offsetTop - offset));
 	}
 });
 
@@ -1414,7 +1419,6 @@ h1 {
 		display: block;
 		position: sticky;
 		top: 0;
-		padding-top: 6rem;
 		align-self: start;
 		max-height: 100vh;
 		overflow-y: auto;
@@ -1427,6 +1431,10 @@ h1 {
 	.mystery-image-pad {
 		height: calc(100vh - 5rem);
 	}
+	.mystery-image-pad[data-target="before"],
+	.mystery-image-pad[data-target="after"] {
+		height: 100vh;
+	}
 	.mystery-image-column figure {
 		margin: 0;
 		margin-right: 2rem;