Panel width squeezes the main content
Aliases: sidebar crowding · inspector width · main column squeezed
What it is
A non-modal panel has to sit beside the main content to stay parallel, and “beside” is subtracted from the main content’s width. Panel width crowding is the main column being cut until the task cannot finish: a table loses a key column, a canvas shrinks, an editor starts scrolling sideways. If the gain of parallel work is bought with the main task’s readability, leaving the panel open costs more than closing it.
Why it happens
Window width is zero-sum. Every column of pixels the panel takes is a column the main surface loses. The main task is usually more width-hungry — tables need column alignment, canvases need a visible working area, readers need a line length. The panel’s width need is often just the minimum readable form field; past that minimum, extra space barely helps the inspector and hurts the main surface a lot. People do not treat “I can still see a sliver of the main content” as the main task still being usable. Once a key column or a canvas handle has been pushed out of the viewport, parallel structure holds and the task fails. A draggable splitter hands the decision to this session, but the default width still decides, for most sessions, how much main surface remains.
Studying it
Open a fixed-width panel at several window widths and run the main task (read a table row to the end, complete one canvas operation). Measure main-task failure, horizontal scrolling, and when people close the panel of their own accord. Independent variables: panel width, window width, main content type (table / canvas / document). Dependent variables: main-task completion, closes whose reason was “to make room.” If the panel is closed to see the main content rather than because the panel’s work is done, crowding has already beaten the parallel gain.
Where it stops holding
On a very wide display crowding is hard to reach and a wider default is fine. On a narrow laptop the inspector should be willing to become a floating layer or a drawer, returning width to the main column at the cost of pausing parallel work. A user who drags the panel wide is explicitly spending main-column width; the default should not imitate that drag. Dual panels (nav on the left, inspector on the right) bite the main column from both sides and must be budgeted separately, not as one side only.
Applying it
- Default the panel to a width that just fits its fields; give leftover flex to the main content.
- When the window is too narrow for the main task’s minimum width, turn the panel into a closable floating layer rather than keep it docked.
- Allow drag-to-resize, but reopen at the default unless the user has pinned a width.
- How to check: at the target laptop resolution, do the main task with the panel open. If the panel must close to see a needed column or canvas region, the default is too wide.