Dense, no-scroll mobile layout

layout-and-composition and grid-and-spacing cover the general system. This skill is the specific discipline of getting a screen to do its job within one viewport so the user isn't endlessly scrolling a tall stack of full-width cards. The goal is not "ban scrolling" — it's "scroll only when there's genuinely more content than screen, never because the layout wastes space."

Core principle: a phone screen is a fixed budget. Spend it on what the user came for; demote everything else off-screen, behind a tap, or into a denser form. A tall single-column stack of one-thing-per-card is the default failure mode — it's easy to build and wastes 60% of the budget on padding and headers.

1. Budget the viewport (know your numbers)

Logical points of content height after chrome, on common iPhones (portrait):

• Small (SE-class): ~667pt total, ~480–520pt usable between status/nav and the floating tab bar.
• Standard (15/16/17): ~852pt, ~650–690pt usable.
• Max/Pro Max: ~932pt, ~720–760pt usable.

Design the primary job to fit the smallest target's usable budget (~500pt). If the core task (see today's numbers / log a meal / check progress) needs scrolling on an SE, the layout is too loose. Everything below the fold is "more," not "the point."

2. The condensing playbook (in order of preference)