fix(mobile): THI-342 — textarea 16px on mobile (iOS auto-zoom) + UserMenu tap-target floor#375
Merged
Merged
Conversation
…Menu tap-target floor 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 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Guide du·de la relecteur·rice (replié sur les petites PR)Guide du·de la Relecteur·riceAjuste la taille de police du textarea sur mobile pour éviter que le zoom automatique d’iOS Safari provoque un dépassement de la fenêtre d’affichage et applique une hauteur minimale de zone tactile pour les éléments du menu utilisateur afin de respecter les recommandations d’accessibilité, sans changer la logique métier. Schéma du flux pour le comportement du focus sur le textarea iOS après le changement de taille de policeflowchart LR
A["L’utilisateur·rice iOS met le focus sur le textarea dans SupportTicketModal"] --> B["Taille de police du textarea text-base (16px) sur mobile"]
B --> C["Aucun zoom automatique iOS Safari déclenché"]
C --> D["La fenêtre d’affichage reste stable"]
D --> E["Le formulaire de ticket de support reste dans la fenêtre d’affichage mobile"]
A2["L’utilisateur·rice iOS met le focus sur le textarea avant la correction"] --> B2["Taille de police du textarea text-sm (14px)"]
B2 --> C2["Zoom automatique iOS Safari au focus"]
C2 --> D2["La fenêtre d’affichage est redimensionnée temporairement"]
D2 --> E2["Le contenu du formulaire dépasse la fenêtre d’affichage"]
Modifications par fichier
Conseils et commandesInteragir avec Sourcery
Personnaliser votre expérienceAccédez à votre tableau de bord pour :
Obtenir de l’aide
Original review guide in EnglishReviewer's guide (collapsed on small PRs)Reviewer's GuideAdjusts mobile textarea font size to prevent iOS Safari auto-zoom causing viewport overflow and enforces a minimum tap-target height for user menu items to meet accessibility guidelines, without changing business logic. Flow diagram for iOS textarea focus behavior after font-size changeflowchart LR
A["iOS user focuses textarea in SupportTicketModal"] --> B["Textarea font-size text-base (16px) on mobile"]
B --> C["No iOS Safari auto-zoom triggered"]
C --> D["Viewport remains stable"]
D --> E["Support ticket form stays within mobile viewport"]
A2["iOS user focuses textarea before fix"] --> B2["Textarea font-size text-sm (14px)"]
B2 --> C2["iOS Safari auto-zoom on focus"]
C2 --> D2["Viewport temporarily resized"]
D2 --> E2["Form content overflows viewport"]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - j'ai laissé quelques commentaires généraux :
- Le commentaire JSX explicatif au-dessus de la zone de texte est assez long et spécifique à l’outil ; envisage de le condenser pour ne garder que l’explication comportementale essentielle (zoom automatique iOS <16px) et de t’appuyer sur la référence au ticket dans la description de la PR pour le contexte supplémentaire.
- Comme
min-h-11encode une contrainte de zone cliquable de l’Apple HIG, tu pourrais l’extraire dans une classe utilitaire partagée ou une constante afin que les autres éléments interactifs puissent réutiliser la même taille minimale de zone tactile de manière cohérente.
Prompt pour les agents IA
Veuillez traiter les commentaires de cette revue de code :
## Commentaires généraux
- Le commentaire JSX explicatif au-dessus de la zone de texte est assez long et spécifique à l’outil ; envisage de le condenser pour ne garder que l’explication comportementale essentielle (zoom automatique iOS <16px) et de t’appuyer sur la référence au ticket dans la description de la PR pour le contexte supplémentaire.
- Comme `min-h-11` encode une contrainte de zone cliquable de l’Apple HIG, tu pourrais l’extraire dans une classe utilitaire partagée ou une constante afin que les autres éléments interactifs puissent réutiliser la même taille minimale de zone tactile de manière cohérente.Sourcery est gratuit pour l’open source - si tu apprécies nos revues, pense à les partager ✨
Original comment in English
Hey - I've left some high level feedback:
- The explanatory JSX comment above the textarea is quite long and tool-specific; consider tightening it to the essential behavioral note (iOS <16px auto-zoom) and relying on the ticket reference in the PR description for further context.
- Since
min-h-11encodes an Apple HIG tap-target constraint, you might want to extract this into a shared utility class or constant so that other interactive elements can reuse the same minimum touch target size consistently.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The explanatory JSX comment above the textarea is quite long and tool-specific; consider tightening it to the essential behavioral note (iOS <16px auto-zoom) and relying on the ticket reference in the PR description for further context.
- Since `min-h-11` encodes an Apple HIG tap-target constraint, you might want to extract this into a shared utility class or constant so that other interactive elements can reuse the same minimum touch target size consistently.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
THI-342 — le formulaire de signalement déborde sur mobile
Corrige le bug signalé dans le ticket support
21f3df1e: le formulaire « Signaler un problème » débordait du viewport sur iPhone.Cause racine (diagnostiquée par
mobile-responsive-auditor)Le
<textarea>de description était entext-sm(14px). Sur iOS Safari, tout champ < 16px déclenche un auto-zoom au focus — ce zoom élargit la viewport logique puis la dézoome, provoquant le débordement observé.Fix
SupportTicketModal.tsx:text-sm→text-base md:text-sm(16px sur mobile = plus d'auto-zoom, 14px restauré sur desktop). Même pattern queMessageInput.tsx.UserMenu.tsx(nit du même audit) : planchermin-h-11(44px Apple HIG) explicite sur les items du dropdown. Ils franchissaient déjà 44px via le padding ; le plancher garantit la cible tactile contre un futur refactor. 0 changement visuel desktop.Hors scope (volontaire)
Le nit sidebar
pb-[max(1rem,env(...))]proposé par l'audit est écarté : il ajouterait 16px de padding bottom sur desktop aussi (oùenv()=0) = régression desktop. Leenv(safe-area-inset-bottom)actuel reste correct (0 desktop, 34px iPhone notché).Validation
text-base md:text-sm= className-only, 0 logique touchée.ui-auditor+feature-dev:code-reviewer+ Voie A mobile 390px (à venir avant merge).🤖 Generated with Claude Code
Summary by Sourcery
Ajuster la taille de la zone de texte du formulaire mobile et les zones cliquables des éléments du menu utilisateur pour améliorer l’ergonomie et l’accessibilité sur iOS.
Corrections de bugs :
Améliorations :
Original summary in English
Summary by Sourcery
Adjust mobile form textarea sizing and user menu item tap targets to improve iOS usability and accessibility.
Bug Fixes:
Enhancements: