Reflow

A responsive pass across a whole app or a named set of views: each one should look and work well on a small laptop, a tablet and a phone. Work from the product's existing design; this pass changes how layouts adapt, not what they look like at desktop width.

State at the start that you are using the reflow skill.

Read references/responsive.md before editing. It holds the breakpoint, input-mode, safe-area, touch-target, table and overflow rules this pass applies.

1. List the views

Enumerate every route in scope, and the states that change layout: empty, loaded, long content, open dialogs, sheets and menus, selection bars, error. A view left off the list is a view nobody checked. State the list before measuring.

2. Measure before changing

Run the app and load each view at these sizes: