Modals and dialogs are usable on mobile screens
Why it matters
A modal with width: 600px on a 375px phone renders with its right edge off-screen, clipping the close button and any right-aligned action buttons. If the close mechanism is off-screen, the user has no way to dismiss the modal except reloading. Modals also commonly lack overflow-y: auto, so long content gets clipped at the bottom of the viewport with no scroll to reach the submit button. Both failure modes trap users.
Severity rationale
Low because modals are a minority of screens, but a user trapped in a broken modal has no recovery path short of reloading.
Remediation
Constrain modal width to 90vw with a max-width for desktop, cap height at 90vh, and enable overflow-y: auto on the content. In shadcn/ui, apply these as classes on DialogContent. Audit any modal or dialog components in src/components/ui/.
<DialogContent className="w-[90vw] max-w-lg max-h-[90vh] overflow-y-auto">
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile Responsiveness Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-responsiveness·automated