A split pane can be narrower than a phone

What it is

A tablet is wider than a phone, but once split-screen is on, this pane can be narrower than a phone. An eleven-inch landscape display cut in half leaves each pane a little over five inches; cut to one-third and the width drops below common handsets, while height remains the tablet’s full height. The result is a tall, thin viewport: not a phone’s short strip, and not a tablet full screen. This entry is about how narrow that pane is and whether layout still works. It is not about information density on a small phone—that is a density problem on another device. Whether the app owns the whole glass is the previous entry.

Why it happens

Phone layouts were tuned for roughly 360 to 430 points of width and a tall aspect ratio. A split pane may be 280 points wide with an even more extreme ratio, because height barely changes while width is halved. A “compact” layout chosen at a phone breakpoint will then pack a bottom bar, a multi-column header, and side-by-side buttons into this tube: vertically the tablet height stretches the column, horizontally it is tighter than any target phone. What appears is not density, it is a narrow-tall ratio phone design never saw. Side padding copied from a phone feels cramped; horizontal row actions (swipe buttons, side-by-side tabs) break before they would on a phone. Forcing a tablet-wide two-pane layout into the same tube drives both panes below readable minima. Width also changes continuously as the user drags the divider, so breakpoints must read window width, not “this is a tablet, use the wide layout.”

Studying it

Place the same UI in three windows: a target phone’s full screen, a tablet full screen, and a tablet split pane (half and one-third). Use a list with a bottom primary button and a row of horizontal tabs.

Independent variables: breakpoint basis (device class versus window width), whether horizontal controls stack vertically under the narrow-tall ratio. Dependent variables: horizontal overflow, truncated tabs, whether the bottom button stays visible inside the pane, completion rate.

The critical contrast is “similar width, different height”: phone full screen and a split pane may be close in width and far apart in height, so they fail differently—the phone runs out of a screenful and must scroll, the split pane wraps horizontally first and still has empty vertical space. Do not mark a compact layout tested on a phone as “split-screen covered.”

Where it stops holding

When the user drags the divider back toward full width, the narrow-pane problem goes away; return to the tablet-wide layout instead of remaining locked in compact. After an external keyboard dismisses the software keyboard, the split pane is even taller, the ratio more extreme, and a bottom bar placed to “keep submit on a phone first screen” may sit a long scroll away in this tube. Portrait tablet plus split-screen can shrink width to a column of icons; rather than a compact layout, prompt to enlarge this window or pause split-screen. Games and fixed canvases may set a minimum width and refuse split-screen or show a crop warning below it.

Applying it

• Read breakpoints from window width, not from “is this a tablet.” When the window is narrower than the phone target, use a tighter tier than the phone mock, not a reuse of the phone mock.
• In a split pane, make horizontal tabs, side-by-side buttons, and swipe-row actions scroll or stack. Do not assume a tablet will always fit them.
• In a split pane, decide two-pane layout against the sum of both pane floors; if it does not fit, collapse to one pane.
• Verify by walking a list through to submit in a one-third split. A horizontal scrollbar, missing tab labels, or a primary button that needs a sideways swipe means the pane is still being measured as phone width or as tablet full width.

Related

• Within the group: K3.05.1 The app may own only a slice of the screen · K3.05.3 Cross-app drag and drop is what split-screen is for
• Adjacent: K1.02 Screen Size and Density Differences · K3.01 Large-screen Two-pane Layout · K2.01 Window Management
• Search terms: split-pane width · narrow column · window breakpoint