From 52827ccc87502fb319b910fab7f0b073690acca4 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 10:00:47 +0200
Subject: [PATCH] feat(documents): hide timeline density widget below lg (#385)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tablet (640–1024px) is exactly the iPad audience for transcribers.
At 240 monthly bars on an 800px column the bars fall to ~3.3px wide,
well below the 44×44 touch-target floor. Bumps the visibility class
from hidden sm:block to hidden lg:block and matches the page.ts
matchMedia gate to (min-width: 1024px). Closes Leonie's tablet
touch-target finding.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/lib/document/timeline.ts      | 8 ++++----
 frontend/src/routes/documents/+page.svelte | 2 +-
 frontend/src/routes/documents/+page.ts     | 4 +++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/document/timeline.ts b/frontend/src/lib/document/timeline.ts
index 120324ec..5919faf7 100644
--- a/frontend/src/lib/document/timeline.ts
+++ b/frontend/src/lib/document/timeline.ts
@@ -193,10 +193,10 @@ export function buildDensityUrl(filters: DensityFilters = {}): string {
 }
 
 /**
- * Loads the density data for the timeline widget. Mobile (sm: breakpoint and below)
- * and calendar view both skip the request entirely — the widget isn't rendered
- * there. A non-ok response or network failure degrades to an empty bucket list
- * instead of throwing, so the document list page keeps rendering.
+ * Loads the density data for the timeline widget. Tablet and below (lg breakpoint,
+ * <1024px) and calendar view both skip the request entirely — the widget isn't
+ * rendered there. A non-ok response or network failure degrades to an empty
+ * bucket list instead of throwing, so the document list page keeps rendering.
  */
 export async function fetchDensity(
 	fetch: typeof globalThis.fetch,
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index b55ef3b1..311f0d81 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -241,7 +241,7 @@ $effect(() => {
 		onblur={() => (qFocused = false)}
 	/>
 
-	<div class="mt-3 mb-4 hidden sm:block">
+	<div class="mt-3 mb-4 hidden lg:block">
 		<TimelineDensityFilter
 			density={data.density}
 			minDate={data.minDate}
diff --git a/frontend/src/routes/documents/+page.ts b/frontend/src/routes/documents/+page.ts
index dace6efe..f29b061c 100644
--- a/frontend/src/routes/documents/+page.ts
+++ b/frontend/src/routes/documents/+page.ts
@@ -4,7 +4,9 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, fetch, data }) => {
 	const view = url.searchParams.get('view');
-	const isDesktop = browser && window.matchMedia('(min-width: 640px)').matches;
+	// Tailwind `lg` breakpoint — bars below this width fall under the 44×44 touch
+	// target floor (Leonie's tablet finding) and the chart skips the fetch.
+	const isDesktop = browser && window.matchMedia('(min-width: 1024px)').matches;
 
 	// Forward active filters (excluding from/to) so the chart matches the list.
 	const tagOp = url.searchParams.get('tagOp');