From 8029bdec928703206f34363787712cd61e5800bd Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 14 Jun 2026 11:38:32 +0200
Subject: [PATCH] fix(timeline): keep the axis spine behind the in-flow content
 (REQ-006)

The absolutely-positioned spine ::before painted above the in-flow centered
content (density strips, event pills), drawing the line through them. Give
.timeline-axis a stacking context and the spine z-index:-1 so the line is
always background; cards, pills, strips, dots and badges ride on top.

Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/TimelineView.svelte         | 9 +++++++++
 frontend/src/lib/timeline/TimelineView.svelte.spec.ts | 5 ++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/timeline/TimelineView.svelte b/frontend/src/lib/timeline/TimelineView.svelte
index 05cf72e4..2820f6d0 100644
--- a/frontend/src/lib/timeline/TimelineView.svelte
+++ b/frontend/src/lib/timeline/TimelineView.svelte
@@ -90,6 +90,14 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 {/if}
 
 <style>
+/* Establish a stacking context so the spine (z-index: -1) sits behind the
+	   in-flow cards/pills/strips but still in front of the canvas — the line is
+	   always background; the badges, dots and markers ride on top of it. */
+.timeline-axis {
+	position: relative;
+	z-index: 0;
+}
+
 /* Phone (< 1024px): a single left-anchored spine. Desktop (≥ 1024px): a
 	   centered spine the bands' alternating cards sit on either side of. The
 	   spine is decorative — the chronology lives in the <ol> DOM order. */
@@ -100,6 +108,7 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 	bottom: 0;
 	left: 0.5rem;
 	width: 2px;
+	z-index: -1;
 	/* Three-stop life-thread: mint → navy → slate. Slate lives only as
 	   --c-tag-slate (there is no --palette-slate). REQ-006/013. */
 	background: linear-gradient(var(--palette-mint), var(--palette-navy), var(--c-tag-slate));
diff --git a/frontend/src/lib/timeline/TimelineView.svelte.spec.ts b/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
index 7616f32b..6eccf324 100644
--- a/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
+++ b/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
@@ -254,10 +254,13 @@ describe('TimelineView', () => {
 			});
 			const axis = document.querySelector('.timeline-axis') as HTMLElement;
 			expect(axis).not.toBeNull();
-			const bg = getComputedStyle(axis, '::before').backgroundImage;
+			const before = getComputedStyle(axis, '::before');
+			const bg = before.backgroundImage;
 			expect(bg).toContain('gradient');
 			// three colour stops: mint, navy, slate
 			expect((bg.match(/rgb/g) ?? []).length).toBe(3);
+			// the spine is always background: behind the in-flow cards/pills/strips.
+			expect(before.zIndex).toBe('-1');
 		} finally {
 			root.style.removeProperty('--palette-mint');
 			root.style.removeProperty('--palette-navy');