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>