Back to patterns
stable-state-geometry
Stable State Geometry
Reserve dimensions for controls, rows, media, and async regions so labels and state changes do not shift the layout.
PatternsRecommended
Intent
Keep interactions predictable and prevent loading, validation, or long content from moving surrounding controls or obscuring information.
Checks
- Reserve media space with explicit dimensions or aspect ratios.
- Test loading, error, success, and longest-label states.
- Keep toolbars, rows, counters, and tiles within stable responsive constraints.
Warnings
- Fixed dimensions must still allow text reflow and zoom.
Exceptions
- Content-driven editorial blocks may grow naturally when growth does not disrupt interaction.