From 8c86beb9f9aacee52efe6bb83283095479bbdf0d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 23 Mar 2026 12:53:04 +0100
Subject: [PATCH] feat(frontend): add expandable text component for long fields

Adds ExpandableText.svelte which clamps text to 10 lines and shows a
toggle button only when the content actually overflows. Applied to the
summary and transcription fields on the document detail page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json                     |  4 ++-
 frontend/messages/en.json                     |  4 ++-
 frontend/messages/es.json                     |  4 ++-
 .../src/lib/components/ExpandableText.svelte  | 33 +++++++++++++++++++
 .../src/routes/documents/[id]/+page.svelte    | 13 ++------
 5 files changed, 45 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/lib/components/ExpandableText.svelte

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 228b7815..017d4a29 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -238,5 +238,7 @@
 	"admin_system_backfill_heading": "Verlaufsdaten auffüllen",
 	"admin_system_backfill_description": "Erstellt einen initialen Verlaufseintrag für alle Dokumente, die noch keinen Verlauf haben (z.B. importierte Dokumente). Dadurch werden beim nächsten Bearbeiten nur die tatsächlich geänderten Felder hervorgehoben.",
 	"admin_system_backfill_btn": "Jetzt auffüllen",
-	"admin_system_backfill_success": "{count} Dokumente wurden aufgefüllt."
+	"admin_system_backfill_success": "{count} Dokumente wurden aufgefüllt.",
+	"comp_expandable_show_more": "Mehr anzeigen",
+	"comp_expandable_show_less": "Weniger anzeigen"
 }
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index cca54480..23f677d1 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -238,5 +238,7 @@
 	"admin_system_backfill_heading": "Backfill history data",
 	"admin_system_backfill_description": "Creates an initial history entry for all documents that do not have one yet (e.g. imported documents). This ensures that future edits only highlight actually changed fields.",
 	"admin_system_backfill_btn": "Backfill now",
-	"admin_system_backfill_success": "{count} documents were backfilled."
+	"admin_system_backfill_success": "{count} documents were backfilled.",
+	"comp_expandable_show_more": "Show more",
+	"comp_expandable_show_less": "Show less"
 }
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index e72775be..595a0dba 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -238,5 +238,7 @@
 	"admin_system_backfill_heading": "Completar datos de historial",
 	"admin_system_backfill_description": "Crea una entrada de historial inicial para todos los documentos que aún no tienen ninguna (p.ej. documentos importados). Así, en la próxima edición solo se resaltarán los campos realmente modificados.",
 	"admin_system_backfill_btn": "Completar ahora",
-	"admin_system_backfill_success": "{count} documentos fueron completados."
+	"admin_system_backfill_success": "{count} documentos fueron completados.",
+	"comp_expandable_show_more": "Mostrar más",
+	"comp_expandable_show_less": "Mostrar menos"
 }
diff --git a/frontend/src/lib/components/ExpandableText.svelte b/frontend/src/lib/components/ExpandableText.svelte
new file mode 100644
index 00000000..a87b13b5
--- /dev/null
+++ b/frontend/src/lib/components/ExpandableText.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { text, maxLines = 10 }: { text: string; maxLines?: number } = $props();
+
+let expanded = $state(false);
+let el = $state<HTMLElement | undefined>(undefined);
+let isClamped = $state(false);
+
+$effect(() => {
+	if (el && !expanded) {
+		isClamped = el.scrollHeight > el.clientHeight;
+	}
+});
+</script>
+
+<div>
+	<div
+		bind:this={el}
+		style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
+		class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
+	>
+		{text}
+	</div>
+	{#if isClamped || expanded}
+		<button
+			onclick={() => (expanded = !expanded)}
+			class="mt-2 font-sans text-xs text-gray-400 transition hover:text-brand-navy"
+		>
+			{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
+		</button>
+	{/if}
+</div>
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 4cd12d7e..62abbe88 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
 import { diffWords } from 'diff';
+import ExpandableText from '$lib/components/ExpandableText.svelte';
 
 let { data } = $props();
 
@@ -592,11 +593,7 @@ function versionLabel(v: VersionSummary, index: number): string {
 									<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
 										>{m.doc_label_summary()}</span
 									>
-									<div
-										class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
-									>
-										{doc.summary}
-									</div>
+									<ExpandableText text={doc.summary} />
 								</div>
 							{/if}
 
@@ -605,11 +602,7 @@ function versionLabel(v: VersionSummary, index: number): string {
 									<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
 										>{m.form_label_transcription()}</span
 									>
-									<div
-										class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
-									>
-										{doc.transcription}
-									</div>
+									<ExpandableText text={doc.transcription} />
 								</div>
 							{/if}
 						</div>