frontend/src/lib/geschichte/GeschichteListRow.svelte

@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { plainExcerpt } from '$lib/shared/utils/extractText';
 import { formatDate } from '$lib/shared/utils/date';
+import { formatAuthorName } from './utils';
 import type { components } from '$lib/generated/api';
 
 type GeschichteRow = Pick<
@@ -18,12 +19,7 @@ const publishedAt = $derived.by(() => {
 	return formatDate(geschichte.publishedAt.slice(0, 10), 'short');
 });
 
-const authorName = $derived.by(() => {
-	const a = geschichte.author;
-	if (!a) return '';
-	const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim();
-	return full || a.email || '';
-});
+const authorName = $derived(formatAuthorName(geschichte.author));
 </script>
 
 <a href="/geschichten/{geschichte.id}" class="block">

frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts

@@ -50,10 +50,12 @@ describe('GeschichteListRow', () => {
 		expect(badge?.tagName.toLowerCase()).toBe('span');
 	});
 
-	it('badge has text-xs class for WCAG readability', async () => {
+	it('badge has small font size appropriate for a label', async () => {
 		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
 		const badge = document.querySelector('[data-testid="journey-badge"]');
-		expect(badge?.className).toContain('text-xs');
+		const fontSize = parseFloat(window.getComputedStyle(badge!).fontSize);
+		expect(fontSize).toBeGreaterThan(0);
+		expect(fontSize).toBeLessThanOrEqual(14); // label badge must not exceed body text size
 	});
 
 	it('renders author name in meta line', async () => {