marcel/familienarchiv
1
0
Fork 0
Code Issues 108 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(timeline): wrap long letter names/titles to avoid 320px overflow

Browse Source 
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>
This commit is contained in:
Marcel
2026-06-13 19:44:23 +02:00
parent 588314f862
commit dbef0e1e60
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/timeline/LetterCard.svelte
View File

@@ -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>