Improving Mobile Dialog Sizing and Touch Targets (MOB-09)

Release: v1.0.345
Component: ConfirmDialog, SubmitConfirmDialog
File: src/components/confirm-dialog.tsx

Background

The Making Tax Digital platform renders confirmation and submission dialogs at several points in the quarterly-submission workflow. On narrow mobile viewports — most notably the iPhone SE at 375 px — two issues were identified:

1. Named max-width utilities can exceed the physical viewport. Tailwind's max-w-sm resolves to 384 px, which is wider than a 375 px viewport. While the outer backdrop's p-4 padding (16 px each side) was preventing visible overflow in practice, this was an implicit constraint rather than an explicit one.
2. The ConfirmDialog close button provided a small touch target. The p-1 padding around the × icon resulted in a tap area well below the 44 × 44 pt minimum recommended for touch interfaces.

Changes Made

1. Viewport-relative max-width cap

Both dialogs now include max-w-[calc(100vw-2rem)] as an explicit upper bound on panel width. This works in concert with existing utilities:

Dialog	Before	After
ConfirmDialog	w-full max-w-md	w-full max-w-md max-w-[calc(100vw-2rem)]
SubmitConfirmDialog	max-w-sm	max-w-sm max-w-[calc(100vw-2rem)]

The calc(100vw-2rem) expression reserves a 1 rem (16 px) gutter on each side of the dialog, guaranteeing that the panel never reaches the edge of the screen regardless of what the named utility resolves to on any given device.

Note: When two max-w-* utilities are present, Tailwind's cascade means the last one wins in a standard build. The intent is that max-w-[calc(100vw-2rem)] acts as the safe upper bound, with the named utility serving as a visual-design target on larger screens where the viewport constraint is not the limiting factor.

2. ConfirmDialog close button touch target

The close button class was updated to match the pattern already used in the Modal component:

- className="rounded-md p-1"
+ className="rounded-md p-2.5 min-h-11 min-w-11 flex items-center justify-center"

Property	Before	After
Padding	p-1 (4 px)	p-2.5 (10 px)
Minimum height	(none)	min-h-11 (44 px)
Minimum width	(none)	min-w-11 (44 px)
Layout	(none)	flex items-center justify-center

The explicit min-h-11 min-w-11 dimensions meet the 44 × 44 pt guideline for touch targets on both iOS and Android, reducing the chance of users accidentally missing the button when dismissing a dialog.

Impact

• No visual change on desktop or tablet viewports — the max-w-md / max-w-sm caps still apply where the viewport is wide enough.
• On iPhone SE (375 px) and similar narrow devices, dialogs are guaranteed a 16 px margin on each side.
• The close button is now reliably tappable across all supported mobile devices.
• Behaviour is consistent with the existing Modal component, reducing visual and behavioural inconsistency across the UI.

Related

• Control reference: MOB-09
• Existing Modal component (close button pattern source)