Mobile Dialog & Modal Sizing — MOB-09 Audit

Version introduced: v0.1.193 Category: Layout / Mobile

Background

On 375 px viewports (iPhone SE, base-tier Android devices), dialog and sheet components that do not explicitly constrain their width can overflow the visible screen area — causing content to be clipped or requiring horizontal scrolling.

During the MOB-09 audit it was discovered that the shadcn Dialog primitive is not present in src/components/ui/. Only optimized-image.tsx exists there. As a result, several components that render modal or slide-over surfaces cannot be confirmed as safe on narrow viewports without inspecting their individual DialogContent implementations.

Affected Components

The following files were flagged for review:

File	Pattern
src/components/changelog-modal.tsx	Dialog / modal
src/components/getting-started-slide-over.tsx	Slide-over / Sheet
src/components/keyboard-shortcuts.tsx	Dialog / modal
src/components/confirm-popover.tsx	Popover / Dialog

Sizing Recommendations

Modal Dialogs (DialogContent)

Add the following className to every DialogContent element:

<DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-lg">
  {/* ... */}
</DialogContent>

• max-w-[calc(100vw-2rem)] — on all viewports, limits the dialog to the viewport width minus 1 rem of breathing room on each side.
• sm:max-w-lg — on the sm breakpoint (≥ 640 px) and above, constrains the dialog to the standard lg max-width, preventing it from becoming too wide on larger screens.

Slide-overs / Sheets

<SheetContent className="w-full sm:max-w-md">
  {/* ... */}
</SheetContent>

• w-full — the sheet occupies the full viewport width on mobile.
• sm:max-w-md — on larger screens the sheet is capped at a comfortable reading width.

Adding the Missing Dialog Primitive

To establish a single, consistently styled source of truth for all modal surfaces, install the shadcn/ui Dialog component:

npx shadcn-ui@latest add dialog

This will create src/components/ui/dialog.tsx and ensure all modal consumers can import from a shared, pre-styled primitive.

Verification Checklist

After applying the recommended class changes, confirm the following for each affected component:

• Open the component on a 375 px wide viewport (browser DevTools or a physical device).
• Verify no horizontal scrollbar appears.
• Verify dialog content is not clipped at either edge.
• Verify the dialog is still visually centred.
• Verify the sm: variant renders correctly at 640 px and above.