Adaptive behavior cannot be captured in static callouts
Aliases: reflow notes · wrap threshold · container queries · static spec failure
What it is
Unannotatable adaptive behavior is layout-regime change as a function of incoming size and content: at what width a row wraps, which children drop into overflow, how a main/side pair stacks after a container query fires. A dimensioned still is one sample of that function, not the function. You cannot recover “how narrow before we restack” from the sample.
This is not the same problem as rewriting 13px into hug/fill. A constraint equation still describes how to solve inside one layout regime. Regime change — three columns to one, side-by-side to wrapped — is a second rule, and a still has no slot in which to write it.
Why it happens
Adaptive behavior is piecewise. Inside a piece, constraints can solve; the switch between pieces (a width threshold, whether content overflows, a query on the container rather than the viewport) is extra input. Static callouts can only hand over one piece’s solution; they cannot name the next piece’s condition. Engineering sees “three equal columns in this frame” and cannot read “when a column cannot hold one minimum unit, stack; if still short, the third column moves into More”.
Wrap, reflow, and container queries are special because the result depends on inputs not yet drawn: future copy length, the user’s split, the host that embeds the card. A prototype or a behavior note writes the function — trigger, structure after the switch, fallback on failure. Without that layer, implementation treats the still’s structure as the only structure, then overflows, truncates, or invents a stop at real widths.
Where it stops holding
An interface that truly has one layout stop, with copy length the product can guarantee will never trip a line, has no regime switch; a still is enough. Pure scale (the whole page magnifies, no wrap, no structural change) is not adaptive behavior; a multiplier suffices. Server-rendered pages whose layout is chosen at request time and never reflows on the client move the switch to the server: the spec object becomes “which stop for which request parameter”, not runtime reflow. Deliberately frozen art direction that keeps one composition at every width has rejected adaptivity; the behavior note says “wrapping is forbidden”, not how to wrap.
Applying it
- For any component that wraps, restacks, or migrates children into an overflow slot, write a behavior note: trigger, what remains on the primary path, where overflow goes.
- Cover at least two regimes with a width-draggable prototype or a recording; do not export only the current artboard.
- Write container-query conditions against the container, not a device name; the same component in a sidebar and in the main column must show two results.
- How to check: hide the prototype, leave only the still and dimension callouts, and ask an implementer “at which width this row wraps, and which child disappears”. No answer, or two people naming two structures, means the behavior was not handed off.