Vertical space runs out before the content does
Fixed headers, toolbars, filters and tall cards take up the screen and leave a narrow band for content.
This is most visible on laptops in data-heavy tools.
Table of Contents
Summarize with:
Key facts
- Each fixed element was approved on its own.
- Nobody measured the combined height on a real screen.
- Mockups were made on large monitors, and the laptop was never the reference screen.
- Users zoom the browser out to see more.
- Compact row density increases the number of visible records.
Why it happens
Everything sticky. Each element was made fixed for its own reason.
Large-monitor mockups. The laptop was never the reference screen.
Design consideration
No budget
Each fixed element was approved on its own, and nobody measured their combined height on a real screen.
How it shows up
- One or two records visible at a time
- Constant scrolling
- Users zoom the browser out
- Pinned toolbars that are rarely used
- Users open records in new tabs to compare them
Options and trade-offs
What helps:
- A vertical space budget per screen
- Toolbars that collapse on scroll
- Compact row density
- Reviews at common laptop resolutions
The tension: collapsing toolbars gives content room, and users then have to look for the controls. Pinned toolbars keep controls in sight at the expense of the content area.
Compact density suits daily users who scan many records, and looks crowded to occasional users and in demos.
Common mistakes
- Reviewing designs only on large monitors
- Making every header, filter bar and toolbar sticky
- Reducing density for daily users who rely on it
- Opening long items on a separate page and losing the user’s place in the list
Where we’ve worked on this