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

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.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 } });