vlmkit demos What changed?

stress i18n

Buttons that overflow when the copy gets longer

Every text run is lengthened 1.4x, roughly what translating English into German does, and the layout is measured again. No translations needed.

Open the page under test · fixtures/i18n-stress/button-overflow/page.html

Run it

vlmkit stress i18n fixtures/i18n-stress/button-overflow/page.html --output-dir {out}
Before inflation, everything fits.
Before inflation, everything fits.
After 1.4x inflation (each word padded with X): the heading ends in an ellipsis, the button label runs past its edge, the line under it takes two.
After 1.4x inflation (each word padded with X): the heading ends in an ellipsis, the button label runs past its edge, the line under it takes two.

What to look at

A fixed-width button and heading overflow, and a paragraph doubles in height. Each finding carries the scroll width against the box.

The fix

Replace the fixed widths with min-width and let text wrap.

What vlmkit printed

vlmkit stress i18n fixtures/i18n-stress/button-overflow/page.html --output-dir {out} · exit 1 — the command fails, as a gate in CI would

  vlmkit stress i18n
  html: fixtures/i18n-stress/button-overflow/page.html  inflate: 1.4x
  ✗ 3 overflow / wrap issue(s) across 5 inspected element(s)
    [horizontal-overflow] div.card>button.btn — scrollW 137 > clientW 120
    [horizontal-overflow] div.card>h2 — scrollW 257 > clientW 200
    [vertical-wrap] div.card>p — h 21 → 42
  report: <out>/report.md