Back to quality gates
stable-layout
Stable Layout
Media, loading, validation, long labels, and async results reserve space and do not unexpectedly move controls or content.
Quality gatesRecommended
Intent
Prevent layout shifts, missed actions, and overlapping UI across normal state transitions.
Checks
- Compare geometry across loading, longest-content, error, success, and empty states.
- For side-by-side regions, compare natural content heights and reject accidental dead columns, unbounded sticky children, or independent scrolling without a task reason.
Warnings
- Rigid heights can trade layout shift for clipping; use responsive constraints.
Exceptions
- Content regions may grow naturally when growth does not displace an active control unexpectedly.