On a narrow screen a dialog often has to become fullscreen

What it is

On a portrait phone, a small centred dialog leaves no usable width in the main UI around it, and the box itself cannot hold a form. Fullscreen dialog spreads this conversation across the viewport and treats it as a page, rather than keeping the floating card from the desktop. The main UI leaves entirely and returns when the dialog closes. That is a change of structure, not the same card scaled up.

Why it happens

A centred dialog declares transience by contrast with the main UI around the box. On a narrow screen that surround is a few pixels of scrim, the contrast dies, the layer looks like a badly cropped page, and usable width is still being taxed as if it were a card. Form fields plus an on-screen keyboard eat the remaining height, and the card model is simply not enough. Fullscreen admits that the viewport is this conversation’s viewport: page margins, internal scroll when the keyboard is up, rather than the whole card being pushed off-screen. The cost is weaker transience: without a ring of main UI, it is easier to read as a new page. So a fullscreen dialog still needs a clear close or back, announcing “this is not the next stop on the nav stack.” The degradation must reverse: when width returns, return to a centred card, and do not carry the phone’s fullscreen shape onto the desktop.

Studying it

Complete the same form dialog on a viewport that narrows, comparing always-centred card, fullscreen-at-threshold, and always-fullscreen. Measure whether fields can be filled, whether the keyboard covers input, whether a leave path remains. Independent variables: viewport width, keyboard up or not. Dependent variables: completion, times the dialog is mistaken for a standalone page and “next” is sought. Near the threshold, card completion should drop and fullscreen completion should rise.

Where it stops holding

A two-line confirm may still work as a card on a phone; do not fullscreen as a blanket. Measure the threshold against content. Landscape tablets often still have room to centre. A bottom action sheet is a different narrow structure — it keeps a strip of main content at the top; a fullscreen dialog does not. The shape of an OS permission sheet is the OS’s; in-app dialog degradation does not cover it.

Applying it

• When a card’s usable width or height falls below the form’s minimum, switch to a fullscreen, page-like dialog, and keep close or back.
• In fullscreen, do not draw a meaningless rounded card inside the page.
• When width returns, go back to a centred card with state intact.
• How to check: on the target phone, bring the keyboard up, finish the form, and leave. Covered fields or no leave path means you are still on a narrow card.

Related

• Within the group: E4.19.1 A dialog’s size should follow how much content it holds, not a single hardcoded box · E4.19.3 When content exceeds the visible height, scroll inside the dialog rather than bursting the overlay · E4.19.4 A focused element should not jump when the dialog’s size changes
• Adjacent: E4.08 Split views and master-detail · E4.10 Modal dialogs
• Search terms: fullscreen dialog · responsive modal · sheet versus dialog