From dbef0e1e60c5dff66837936256e7faef58e3bfc6 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 13 Jun 2026 19:44:23 +0200
Subject: [PATCH] fix(timeline): wrap long letter names/titles to avoid 320px
 overflow

break-words on sender/receiver/title so a 25+char correspondent name cannot
force horizontal overflow on a 320px phone (REQ-005).

Refs #779
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/LetterCard.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/timeline/LetterCard.svelte b/frontend/src/lib/timeline/LetterCard.svelte
index f5f90302..b7e8362c 100644
--- a/frontend/src/lib/timeline/LetterCard.svelte
+++ b/frontend/src/lib/timeline/LetterCard.svelte
@@ -29,9 +29,11 @@ const receiver = $derived(
 	class="rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
 >
 	{#if entry.title}
-		<span class="font-serif text-sm font-bold whitespace-pre-line text-ink">{entry.title}</span>
+		<span class="font-serif text-sm font-bold break-words whitespace-pre-line text-ink"
+			>{entry.title}</span
+		>
 	{/if}
-	<span class="mt-0.5 font-sans text-xs text-ink-3">
+	<span class="mt-0.5 font-sans text-xs break-words text-ink-3">
 		<span class="font-serif whitespace-pre-line">{sender}</span>
 		<span aria-hidden="true">→</span>
 		<span class="font-serif whitespace-pre-line">{receiver}</span>