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

feat(briefwechsel): ConversationThumbnail page badge legible at small sizes

Browse Source 
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>
This commit is contained in:
Marcel
2026-04-23 20:30:19 +02:00
parent 858c9f0564
commit 0a3e5d6260
2 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/ConversationThumbnail.svelte
View File

@@ -41,7 +41,7 @@ const tileClass = $derived(aspect === 'LANDSCAPE' ? 'h-[120px] w-[168px]' : 'h-[
{#if pageCount > 1} {#if pageCount > 1}
<span <span
data-testid="conv-thumb-page-badge" 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 >{pageCount}</span
> >
{/if} {/if}

3
frontend/src/lib/components/ConversationThumbnail.svelte.spec.ts
View File

@@ -78,6 +78,9 @@ describe('ConversationThumbnail', () => {
const badge = document.querySelector('[data-testid="conv-thumb-page-badge"]') as HTMLElement; const badge = document.querySelector('[data-testid="conv-thumb-page-badge"]') as HTMLElement;
expect(badge).not.toBeNull(); expect(badge).not.toBeNull();
expect(badge.textContent).toContain('4'); 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', () => { it('hides the page badge when pageCount is 1 or missing', () => {