From ea106e9414dea76d718fc1c0d968c44e91c5d20e Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 09:54:43 +0200
Subject: [PATCH] style(documents): timeline axis text to 12px / h-4 (#385)

text-[10px] failed Leonie's 12px font floor. Bumps Y-axis labels and
the X-axis tick row to text-xs (12px); the X-axis row grows to h-4 to
accommodate the line height. Regression-pinned via two new specs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/lib/document/TimelineDensityFilter.svelte |  4 ++--
 .../document/TimelineDensityFilter.svelte.spec.ts | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte b/frontend/src/lib/document/TimelineDensityFilter.svelte
index 9a775080..973d3c1b 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte
@@ -241,7 +241,7 @@ const omitTickYear = $derived.by(() => {
 	>
 		<div class="flex">
 			<div
-				class="flex flex-col justify-between pr-1.5 text-right font-sans text-[10px] leading-none text-ink-3"
+				class="flex flex-col justify-between pr-1.5 text-right font-sans text-xs leading-none text-ink-3"
 				style="height: {BAR_AREA_HEIGHT}px;"
 				aria-hidden="true"
 				data-testid="timeline-y-axis"
@@ -288,7 +288,7 @@ const omitTickYear = $derived.by(() => {
 				</div>
 
 				<div
-					class="relative mt-1 h-3 font-sans text-[10px] leading-none text-ink-3"
+					class="relative mt-1 h-4 font-sans text-xs leading-none text-ink-3"
 					aria-hidden="true"
 					data-testid="timeline-x-axis"
 				>
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
index 3521b788..5dab3d63 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
@@ -309,6 +309,21 @@ describe('TimelineDensityFilter — zoom', () => {
 });
 
 describe('TimelineDensityFilter — accessibility', () => {
+	it('Y-axis labels meet the 12px minimum font floor (Tailwind text-xs)', async () => {
+		render(TimelineDensityFilter, makeProps());
+		const yAxis = document.querySelector('[data-testid="timeline-y-axis"]') as HTMLElement;
+		expect(yAxis.classList.contains('text-xs')).toBe(true);
+		expect(yAxis.className).not.toMatch(/text-\[10px\]/);
+	});
+
+	it('X-axis row uses text-xs and h-4 to fit the 12px line height', async () => {
+		render(TimelineDensityFilter, makeProps());
+		const xAxis = document.querySelector('[data-testid="timeline-x-axis"]') as HTMLElement;
+		expect(xAxis.classList.contains('text-xs')).toBe(true);
+		expect(xAxis.classList.contains('h-4')).toBe(true);
+		expect(xAxis.className).not.toMatch(/text-\[10px\]/);
+	});
+
 	it('bar aria-label is built from a localised template, never the raw YYYY-MM', async () => {
 		render(
 			TimelineDensityFilter,