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"
 }

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"
 }

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"
 }

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>

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>