From e37351f5c2ea4504d9e179978809e912efbf8507 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 19 May 2026 23:26:11 +0200
Subject: [PATCH] a11y(transcription): cap @mention listbox width at
 viewport-1rem (WCAG 1.4.10)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/lib/shared/discussion/MentionDropdown.svelte | 2 +-
 .../lib/shared/discussion/MentionDropdown.svelte.test.ts  | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
index 54ba8ce7..a8186ffe 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte
@@ -156,7 +156,7 @@ function selectItem(item: Person) {
 	unauthenticated users.
 -->
 <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"
 	aria-label={m.person_mention_btn_label()}
 	style:top={position.top}
diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
index 47549bd5..adf60496 100644
--- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
+++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
@@ -196,6 +196,14 @@ describe('MentionDropdown — search input', () => {
 		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 () => {
 		const onSearch = vi.fn();
 		render(MentionDropdown, { props: { model: baseModel(), onSearch } });