Layouts have to be tested with extreme lengths and empties, not typical copy

What it is

The mock’s name is “Jane Doe,” the title two lines exactly. Production is “María del Carmen Fernández-Villanueva,” or an empty string, or a single emoji. The row grows to three lines and the avatar misaligns, or the row collapses to a slit. Layout is a function of content size. Signing off on typical copy certifies the median; tail failures were never seen.

Whether overflow truncates or wraps is a policy the next leaf has to name. This one only demands that the test set contain extremes.

Why it happens

Mocks sample a mental model of “normal”: short names, an image, a value. A layout that holds at the median is silent about empty and about over-long. Empty crushes height to zero; alignments that depended on that height (vertically centred avatar, a price on the bottom) collapse with it. Over-long, in languages that do not wrap (URLs, German compounds, unspaced CJK titles), becomes a stick that pries the parent open. Emoji, combining marks and RTL markers also slice mid-glyph when you truncate by character count.

Typical lorem that happens to match real name lengths is the most dangerous: it looks tested, and still only tested the median.

Where it stops holding

Fields the input side clamps hard, and the backend cannot concatenate longer (OTP, a two-letter country code), can live with a tiny extreme set. Even then, if user content has a max, that max belongs in the fixtures — not “pretty fake data near the max.” Missing images and failed loads are the same class of extreme as length.

Applying it

• Five fixtures per text slot: empty, one character, typical, 2× typical, long with no spaces; plus missing image. Do not sign off on the typical one alone.
• Put the fixtures in the component preview or tests, not on a hidden page in the designer’s file.
• How to check: pour the five into the live component in order. Note the first slot that wraps badly, drops alignment, or collapses to zero height. Look at that slot on typical data again — it usually looks fine. Fix the extreme before calling the layout done. In German or user-generated titles, the long fixture must come from that language; English short words with spaces do not impersonate it.

Related

• Same group: F2.16.2 Overflow policy (truncate, wrap, scroll) has to be named · F2.16.3 Undefined overflow blows the layout or covers neighbours · F2.16.4 Real length distributions run more extreme than mock copy
• Nearby: F4.10 Truncation and ellipsis · F2.07 Information density · E6.06 Empty states
• Search terms: extreme content · empty string · long unbreakable · layout fixture