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

a11y(transcription): cap @mention listbox width at viewport-1rem (WCAG 1.4.10)

Browse Source 
w-72 (288 px) listbox can overflow horizontally on a 320 px viewport
when the caret sits near the right edge — the existing flip logic
only handles vertical overflow. max-w-[calc(100vw-1rem)] adds a
defensive horizontal cap so a senior on a 320 px phone never sees
the dropdown clip off-screen. Leonie FINDING-MENTION-005 on PR #629.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-19 23:26:11 +02:00
committed by marcel
parent feb5275a94
commit 5301820a88
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/shared/discussion/MentionDropdown.svelte
View File

@@ -156,7 +156,7 @@ function selectItem(item: Person) {
unauthenticated users. unauthenticated users.
--> -->
<div <div
class="fixed z-50 w-72 overflow-hidden rounded-sm border border-line bg-surface shadow-lg" class="fixed z-50 w-72 max-w-[calc(100vw-1rem)] overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
role="listbox" role="listbox"
aria-label={m.person_mention_btn_label()} aria-label={m.person_mention_btn_label()}
style:top={position.top} style:top={position.top}

8
frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
View File

@@ -196,6 +196,14 @@ describe('MentionDropdown — search input', () => {
expect(input.value).toBe('A'.repeat(100)); expect(input.value).toBe('A'.repeat(100));
}); });
it('caps the listbox width to the viewport (320 px reflow guard — Leonie FINDING-MENTION-005)', async () => {
render(MentionDropdown, { props: { model: baseModel() } });
const listbox = document.querySelector('[role="listbox"]') as HTMLElement;
expect(listbox).not.toBeNull();
expect(listbox.className).toContain('max-w-[calc(100vw-1rem)]');
});
it('invokes onSearch with the current value whenever the user types', async () => { it('invokes onSearch with the current value whenever the user types', async () => {
const onSearch = vi.fn(); const onSearch = vi.fn();
render(MentionDropdown, { props: { model: baseModel(), onSearch } }); render(MentionDropdown, { props: { model: baseModel(), onSearch } });