A narrow screen should degrade to two sequential pages

What it is

Two columns on stage need horizontal resolution. When the viewport cannot fit both a readable identifier column and a usable detail, master-detail should degrade into two sequential pages: a full list, then a full detail after a tap — not two half-width columns. A squeezed fake split makes both sides unusable, which is worse than an honest navigation stack. This is about how the structure changes, not about how list position is remembered on the way back.

Why it happens

The split’s benefit is “collection and object visible together.” Forcing that on a narrow viewport drops the list below a readable identifier and the detail below a fillable form, so “visible together” becomes “unusable together.” Perception does not restore clipped type because the layout is still named master-detail. Degradation admits the premise has failed and trades time for space: the list page gets full width, the detail page gets full width, and context moves from “neighbours in peripheral view” to “the list page after back.” Changing row now costs a stack push, which a narrow screen can afford and should. Half-width columns look as if they kept the desktop structure and actually break both tasks’ minimum widths. Foldables and split windows cross this threshold in the middle of a session; degradation has to be a reversible layout response, not a shape chosen at install.

Studying it

On a viewport that narrows, run the same inspection task under always-two-columns, degrade-at-threshold, and always-two-pages. Measure identifier truncation, whether forms can be completed, time to change row, wrong actions. Independent variables: viewport width, threshold, minimum column widths. Dependent variables: completion, wrong selections from truncation. There should be a band of widths where two columns collapse in completion and two pages stay high — that is the band that should degrade.

Where it stops holding

Do not degrade early on landscape tablets or still-wide desktop windows, or simultaneous context is thrown away for nothing. A read-only detail with almost no fields (one-line preview) may still sit beside a list on a phone; measure the threshold against content, not against device class. Turning detail into a bottom sheet rather than a second page is a different narrow structure: the sheet covers the lower list, and context is only the upper half, which is not the same degradation as two full pages.

Applying it

• Mark a minimum usable width for the list column and for the detail column. Below the sum, switch to a two-page stack.
• After degradation, detail owns the viewport and the list leaves. Do not leave an avatar-thin “master” pretending the split is still alive.
• When width is enough again, return to two columns with selection and detail aligned, rather than staying in the single-page stack.
• How to check: on the target narrow screen, read identifiers to the end and complete required fields in detail. If either column cannot, you are still in a fake split.

Related

• Within the group: E4.08.1 A master-detail view keeps the list in context · E4.08.3 After that degradation, returning to the list must restore position
• Adjacent: E4.03 Tables · E4.09 Drawers · E4.19 Dialog size and responsiveness
• Search terms: responsive split view · master-detail breakpoint · stack navigation