From 0a3e5d62609c301b0378446906c0149095aefb34 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 23 Apr 2026 20:30:19 +0200
Subject: [PATCH] feat(briefwechsel): ConversationThumbnail page badge legible
 at small sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps the multi-page badge from text-xs (12px) / px-1.5 py-0.5 to
text-sm (14px) / px-2 py-1. Meets senior-legibility on a 320px phone
without crowding the 120-wide tile — the badge stays tucked in the
top-right corner.

Refs #305
Fixes @leonievoss senior-accessibility concern from PR review

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/ConversationThumbnail.svelte       | 2 +-
 .../src/lib/components/ConversationThumbnail.svelte.spec.ts    | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/ConversationThumbnail.svelte b/frontend/src/lib/components/ConversationThumbnail.svelte
index 61c62c00..376f0c40 100644
--- a/frontend/src/lib/components/ConversationThumbnail.svelte
+++ b/frontend/src/lib/components/ConversationThumbnail.svelte
@@ -41,7 +41,7 @@ const tileClass = $derived(aspect === 'LANDSCAPE' ? 'h-[120px] w-[168px]' : 'h-[
 	{#if pageCount > 1}
 		<span
 			data-testid="conv-thumb-page-badge"
-			class="absolute top-1 right-1 rounded-full bg-primary/90 px-1.5 py-0.5 text-xs leading-none font-bold text-surface"
+			class="absolute top-1 right-1 rounded-full bg-primary/90 px-2 py-1 text-sm leading-none font-bold text-surface"
 			>{pageCount}</span
 		>
 	{/if}
diff --git a/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts b/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts
index e8874710..ccebd29b 100644
--- a/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts
+++ b/frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts
@@ -78,6 +78,9 @@ describe('ConversationThumbnail', () => {
 		const badge = document.querySelector('[data-testid="conv-thumb-page-badge"]') as HTMLElement;
 		expect(badge).not.toBeNull();
 		expect(badge.textContent).toContain('4');
+		// Senior-readable size: text-sm (14px) rather than text-xs (12px) on a
+		// small tile avoids marginal legibility on a 320px phone.
+		expect(badge.className).toContain('text-sm');
 	});
 
 	it('hides the page badge when pageCount is 1 or missing', () => {