Superior Responsive

Make the same task usable across available space and input conditions. Responsive work is re-composition, not desktop shrinkage.

Diagnose from content

• Identify the first width where reading order, controls, data, or navigation stop working.
• Trace the element that establishes the bad width; do not hide page overflow before finding its source.
• Inspect fixed widths, minimum sizes, grid tracks, unbreakable text, positioned elements, media, tables, and viewport units.
• Test with realistic long labels and dense content, not only an empty happy path.

Choose breakpoints where the composition fails. Device names may be test targets, but they are not design evidence.

Choose composition variants

Define what remains invariant across viewports: the user's task, content meaning, available actions, and state. Then decide what may change: grouping, placement, density, navigation model, representation, or interaction sequence.

Read references/responsive-composition-patterns.md when creating a new responsive layout, redesigning several regions, or choosing distinct mobile and desktop compositions. Use it to compare transformation patterns for navigation, sidebars, grids, tables, forms, heroes, dashboards, and footers. For a focused overflow or breakpoint repair, work directly without loading the reference.