Chapter 29. 2026-07-22: The Headline That Wrapped at Every Width

On 2026-07-22 the studio.suedeai.ai hero was rendering five lines, sometimes six, because all three terms in its clamp(2.9rem, 8.5vw, 7rem) font-size were too large for these phrase lengths in Syne ExtraBold. Each phrase was word-wrapping inside its own block span, so the stack came apart one line at a time and the composition turned into a jumble.

The hero is a three-line kinetic stack. “Own the master.” takes the first line, “Keep 100% of the” the second, “royalties.” the third. The phrases are hardcoded, each inside its own <span className="block"> in frontend/src/components/studio/founder-hero.tsx, and the whole unit is set in Syne ExtraBold, a wide, heavy display face. My report used the words “distorted and totally out of scale,” and the diagnosis that followed backed the wording with measurements. I do not know how long the page had been rendering that way. The record starts with my report.

The measurements were stranger than I expected. The headline was oversized at every tested viewport from 320px through 1920px. A normal responsive bug lives at a seam: you find it at the width where one layout hands off to the next, fix the handoff, and move on. This one had no seam. It was wrong at phone width and wrong again on a 1920px desktop monitor, with the same declaration responsible at both ends.

Why one clamp() can be wrong at 320px and at 1920px

The declaration:

font-size: clamp(2.9rem, 8.5vw, 7rem);

A clamp() font-size is three decisions, not one. The floor governs narrow viewports, the preferred vw term governs the middle band, and the ceiling governs wide screens. Each term owns its own range of widths, which means each term needs its own check against the longest phrase in the real font, and none of the three gets that check for free from the other two. Here all three terms were too large for these specific phrase lengths in Syne ExtraBold, so the headline overflowed its container under floor rule, slope rule, and ceiling rule alike. A formula gets to be wrong at 320px and at 1920px at the same time when it is three wrong values packaged to read as one considered choice.

The trap is that the broken values look tuned. A floor of 2.9rem and a slope of 8.5vw carry decimal precision, and decimal precision reads as the residue of measurement. Nothing in the source records what the values were measured against. I have no record of the viewport they were eyeballed at, or of what the copy said when they went in. The incident file states the pattern in general form: a clamp() font-size tuned by eye at one or two widths can overshoot at every other width once real long copy is dropped in. The typeface raises the stakes, because at any given size Syne ExtraBold fits fewer characters per line than a narrower face would, so the same formula that survives a modest font fails a wide bold one.

A second mismatch hides in the unit itself. The 8.5vw term scales with the viewport, but the constraint that decides wrapping is the container width, and those are not the same number. The diagnosis recorded the failure in those terms: the clamp scaled too hard relative to actual container width for those phrase lengths. A vw-driven size makes a promise about the window while the text answers to a box inside it.

Why silent wrapping raises no error and no audit flag

The bug raised no alarm because wrapping is not an error state. The browser treats a wrapped line as correct layout, so nothing overflows the viewport and the console stays quiet. The block spans improved the disguise: since each phrase is its own block, the browser wrapped each one on its own, and five or six ragged lines of giant bold text look like a typographic decision you happen to dislike rather than a defect. An automated audit has nothing to grab. The computed styles cooperate too: opacity, color, and position all read correct, so the element answers healthy to the questions an audit asks.

What found the bug was me, loading the page and looking at it. That detector inspects one viewport at a sitting and does not scale across an estate of live surfaces, which is why the useful output of this incident is a pair of probes an agent can run without taste.

Two probes that detect a wrapping headline

The screen test is geometric:

el.getBoundingClientRect().height / parseFloat(getComputedStyle(el).lineHeight)

A span meant to hold one line should put that ratio near 1. The rect height integrates however many lines the browser produced, while line-height states the intent for a single one. If the ratio sits near 2, the element is wrapping, whatever every other computed property says. On this hero, every other property said fine.

The confirmation is a width probe on the live element: set white-space: nowrap and display: inline-block on the span, read its natural text width, compare that against the container width, then revert. “On the live element” is the load-bearing phrase. The tempting version is to clone the node, measure the clone, and leave the page untouched, and here it lies: a detached clone stops inheriting scoped CSS custom properties, and next/font delivers its font family through that kind of variable. The clone falls back to different metrics and hands you the width of text the page never renders. Measure the element in place.

PR #751: the corrected clamp, checked at six widths

PR #751 replaced the declaration with clamp(1.25rem, 6.3vw, 5.125rem), merged, and deployed. Every term came down, floor and slope and ceiling together, per the table above. The verification is the part worth stealing. Before shipping, the new value was held to a stated invariant, one line per phrase, at six named widths (320, 375, 768, 1024, 1280, and 1920px), against the live rendered font. The original clamp would have failed that check at all six. A check like this costs minutes in a devtools console and closes the exact hole that eyeball tuning opened.

Why JSX collapsed the space and shipped “$7.99/mowhen”

The same pass caught two missing-space typos live on the page, the worse of them rendering as “$7.99/mowhen” with zero space between the price and the word after it. The cause is JSX whitespace collapsing: when a {expression} is followed by text on the next source line, JSX collapses the whitespace between them and the render runs the two together. The incident file calls this a well-known gotcha. Well known did not mean caught; the string shipped to a live marketing page. The fix is an explicit {' '} after the expression, and it went out in the same PR #751, alongside a copy sweep that removed em dashes from all public-facing text: titles, OG, Twitter, and JSON-LD metadata, the FAQ, alt text, and aria-labels. Code comments kept theirs on purpose. The style rule serves readers, and maintainers are not the readers.

The typo earns its place in this chapter because it fails the way the clamp fails. In the source, a line wrap after an expression looks like ordinary formatting, the same way clamp(2.9rem, 8.5vw, 7rem) looks like a tuned value. Neither defect is visible where the work happens. Both exist in the render and nowhere else, which points the two lessons at the same target: read the rendered string, not the source, when you check copy, and measure the rendered element, not the stylesheet, when you check layout. Source-formatting a JSX line changes rendered output without changing anything a reviewer’s eye flags as content.

What clamp() guarantees, and what it leaves to you

A responsive formula can be wrong at every size while looking plausible in the one viewport you checked. clamp() invites the mistake by its shape: a floor, a slope, and a ceiling look as if small, medium, and large were each considered. The function guarantees its output stays between the two bounds you chose. It says nothing about whether either bound, or the slope between them, fits your copy in your font inside your container. Each term is a separate claim about a range of widths, and each claim needs its own test against the longest real line.

The standing rule that came out of 2026-07-22: any Suede surface with a hardcoded per-line clamp() headline gets checked for silent wrapping, by measuring natural text width against container width at the actual breakpoints, on the live in-place element, against the real rendered font. The height-to-line-height ratio is the cheap screen. The nowrap probe is the confirmation. Both fit inside an agent’s verification pass, which is where they belong, because a human spot-check covers whichever window happens to be open and nothing else.

The last note goes in the component’s record. This same hero already carried two documented anti-patterns from the estate Lighthouse pass: entrance-animation-driven NO_LCP and non-composited animations. The clamp overshoot makes three. Hero sections concentrate visual ambition, and the incident history follows the ambition. When one component has produced three entries in the record, the next audit of that page starts there, and mine now does.