A narrow window collapses to one pane and still needs a way back

What it is

When the window is too narrow for both panes to stay readable, two-pane layout should collapse to one pane and leave a way back to the list on the detail. The trigger is a form-factor event, not a navigation theory: portrait hold, a folded cover display, a one-third split all drive usable width through a threshold while the app is running. Collapse admits that simultaneity no longer pays. Keeping a back action matters because the list has left the viewport; without an explicit exit, people get stuck in the detail and have to guess which system gesture returns them. Do not keep two half-starved columns. How width is shared while two panes remain is a different problem.

Why it happens

Two panes earn their keep from collection and object being present together. Forced presence below a usable width truncates identifying fields and breaks forms, so “together” becomes “both unusable.” Collapse trades time for space: a full-width list, then a full-width detail. Once the list is unloaded, return is no longer a change of selection—it is a stack operation, and it needs a visible control or a stable system-back contract. Setting the list pane’s width to zero without pushing detail onto a stack leaves neither list nor back: navigation is simply cut. When width returns (rotate, unfold, leave split-screen), the layout should restore two panes and align the current object with list selection, rather than remaining in the single-pane stack. Moving from cover display to inner display is the same task crossing the threshold; collapse has to be reversible.

Studying it

In one app, walk available width through landscape full, portrait, one-third split, and a folded cover display. Compare always-two-panes, collapse-with-visible-back, and collapse-without-back.

Independent variables: collapse threshold, whether collapsed detail shows a back control, whether two panes restore when width returns. Dependent variables: task completion, times stuck in detail, exits via system gesture, selection errors from truncated identifiers.

There should be a width band where forced two-pane completion drops while single-pane-with-back still finishes. Do not treat “they know the system back gesture” as the app having provided return—gesture fluency hides the missing control. Change width mid-task so the run captures a live crossing of the threshold, not only two static layouts.

Where it stops holding

Do not collapse early on full landscape or a still-wide window, or simultaneity is thrown away for nothing. A one-line preview may still fit beside the list at a narrower width; measure the threshold on real content, not a blanket “portrait equals single pane.” A bottom sheet covering the lower list is not the same collapse as a full-width detail page; context then survives only in the uncovered half. On platforms with a stable edge-swipe back, the in-app control can be lighter, but it cannot shrink to an undiscoverable gesture. Hardware-keyboard users lean on a visible back control or Escape, not on an edge swipe.

Applying it

• Set a collapse threshold on the sum of both pane minima; below it, stack to a single pane, detail full-width, list gone.
• Collapsed detail must expose a visible back (bar button, navigation back, or a platform-promised system back that can be found). Do not merely zero the list width.
• When width rises above the threshold, restore two panes and align the current object with list selection.
• Verify by opening a detail in portrait and in a one-third split: returning to the list must not require guesswork. Rotate to full landscape and both panes should return with selection intact. Stuck in detail, or still single-pane after the window widens, means collapse or restoration broke.

Related

• Within the group: K3.01.1 Two panes keep the list and the detail on screen together · K3.01.2 Pane widths have to track the window
• Adjacent: E4.08 Split Views and Master-Detail · G4.01 Back Stack and Back Semantics · K3.03 Fold-state Transitions
• Search terms: single-pane collapse · split view breakpoint · back from detail