From cdfc13e90d5943262db7366e3c68457337d0ede1 Mon Sep 17 00:00:00 2001 From: Thierry Date: Sat, 6 Jun 2026 20:52:26 +0200 Subject: [PATCH] =?UTF-8?q?fix(mobile):=20THI-342=20=E2=80=94=20textarea?= =?UTF-8?q?=2016px=20on=20mobile=20(iOS=20auto-zoom)=20+=20UserMenu=20tap-?= =?UTF-8?q?target=20floor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SupportTicketModal description textarea was text-sm (14px). On iOS Safari any input < 16px triggers a focus auto-zoom, which pushed the support form past the viewport (the THI-342 "form overflows on mobile" report). Switch to text-base md:text-sm: 16px on mobile (no zoom), 14px restored on desktop — the same pattern already used in MessageInput.tsx. Also add an explicit min-h-11 (44px) floor to the UserMenu dropdown itemClass. The items already cleared 44px via padding; the floor makes the Apple HIG tap target guaranteed against future padding refactors. No desktop visual change. Found by mobile-responsive-auditor (pre-deadline sweep). No logic touched (className-only): type-check + lint clean, 109 support/auth tests pass. Co-Authored-By: Claude Opus 4.8 --- src/app/components/auth/UserMenu.tsx | 2 +- src/app/components/support/SupportTicketModal.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/components/auth/UserMenu.tsx b/src/app/components/auth/UserMenu.tsx index 729db98..39836e3 100644 --- a/src/app/components/auth/UserMenu.tsx +++ b/src/app/components/auth/UserMenu.tsx @@ -136,7 +136,7 @@ export function UserMenu({ syncStatus, variant = 'card', extraActions, secondary // Se déconnecter. Langage couleur : liens = neutre→emerald au survol, // Se déconnecter = rouge (cohérent avec l'existant). const itemClass = - 'flex items-center w-full justify-start gap-2.5 px-4 py-3 text-sm text-[var(--github-text-primary)] font-mono hover:bg-emerald-500/10 hover:text-emerald-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-inset'; + 'flex items-center w-full justify-start min-h-11 gap-2.5 px-4 py-3 text-sm text-[var(--github-text-primary)] font-mono hover:bg-emerald-500/10 hover:text-emerald-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/60 focus-visible:ring-inset'; const menuItems = (
diff --git a/src/app/components/support/SupportTicketModal.tsx b/src/app/components/support/SupportTicketModal.tsx index 60426e1..109b8f9 100644 --- a/src/app/components/support/SupportTicketModal.tsx +++ b/src/app/components/support/SupportTicketModal.tsx @@ -210,6 +210,9 @@ export function SupportTicketModal({ userId, onClose }: SupportTicketModalProps) > Description + {/* text-base (16px) on mobile prevents iOS Safari focus auto-zoom (any + input < 16px triggers it), the cause of the THI-342 viewport overflow + after focus. md:text-sm restores 14px on desktop (MessageInput pattern). */}