Skip to content

fix: the stage's controls track was eating the field - #19

Merged
DoodleBears merged 1 commit into
mainfrom
fix/stage-controls-track-eats-field
Oct 1, 2026
Merged

DoodleBears merged 1 commit into
mainfrom
fix/stage-controls-track-eats-field

Conversation

@DoodleBears

Copy link
Copy Markdown
Contributor

Why

Reported twice as "Column Drop shows nothing". The previous fix (#18) was correct and
insufficient: the motion was rendering — 25 cells, animating, one column lit at a time. It
was being clipped out of the viewport.

Change outline

The stage is grid-template-columns: auto minmax(0, 1fr), and an auto track is sized by
max-content
. The refusal caption — "this motion is a highlight moving down the field…",
shown only when the CSS renderer refuses the chosen motion — is a sentence, so that one
caption grew the controls track from 264px to 602px and collapsed the field's track to
zero. Measured in Chrome, before:

stage controls field
spiral (caption hidden) 648 264 338
columns (caption shown) 648 602 0

The stage is overflow: hidden, so a zero-width track doesn't squash the field — it
removes it from the render. The DOM held all 25 cells with correct fill-opacity; the
page showed nothing.

One declaration, verified in a browser (after: 264px / 338px in both states):

grid-template-columns: minmax(0, 264px) minmax(0, 1fr);

Special things to note

  • Reversibility: one CSS declaration. Review focus is whether 264px is the right cap —
    the capping is the fix, the number is a judgement about how wide the steppers should be.
  • No automated test for this one, deliberately — and that is the interesting part.
    • jsdom computes no layout: getComputedStyle(el).gridTemplateColumns on a real grid
      rule returns the empty string. Nothing in this repo can catch a collapsed track.
    • I wrote one anyway. It regexed the stylesheet for the rule and matched a different
      component's
      repeat(auto-fill, minmax(280px, 1fr)) — so it went green with the bug
      present
      , and would have stayed green forever.
    • A test that can assert about the wrong rule is not a slow test, it is a wrong one,
      and a green wrong test costs more than no test, because it is believed.
    • AGENTS.md records the class instead: layout must be verified in a real browser over CDP,
      with a dedicated --user-data-dir (reusing the default profile makes the Chrome instance
      exit immediately — that cost more time than the bug did) and screenshots.
  • 215 tests (was 215), oxlint 0, registry ok, both changelog ledgers.

🤖 Generated with Claude Code

Reported twice now as "Column Drop shows nothing". The previous fix was correct and
insufficient: the motion WAS rendering — 25 cells, animating, one column lit at a time. It
was being clipped out of the viewport.

The stage is `grid-template-columns: auto minmax(0, 1fr)`, and an `auto` track is sized by
max-content. The refusal caption — "this motion is a highlight moving down the field…", shown
only when the CSS renderer refuses the chosen motion — is a sentence, so that one caption
grew the controls track from 264px to 602px and collapsed the field's track to ZERO. Measured,
before the fix:

    spiral  (caption hidden)  stage 648  controls 264  field 338
    columns (caption shown)   stage 648  controls 602  field 0

The stage is `overflow: hidden`, so a zero-width track does not squash the field, it removes
it from the render. The DOM held all 25 cells with correct `fill-opacity`; the page showed
nothing. An `auto` track cannot express "as wide as it needs, but never at the field's
expense", and `minmax(0, auto)` is the same thing — the track is capped instead, and
`min-width: 0` lets the caption wrap inside that cap rather than widening it.

The fix is one declaration and it is verified in a browser, where the numbers above come
from.

NO AUTOMATED TEST FOR THIS ONE, DELIBERATELY. jsdom computes no layout — `getComputedStyle
(el).gridTemplateColumns` on a real grid rule returns the empty string — so nothing in this
repo can catch a collapsed track. The first attempt was worse than none: it regexed the
stylesheet for the rule and matched a DIFFERENT component's `repeat(auto-fill, minmax(280px,
1fr))`, so it went green while the bug was present and would have gone green forever after.
A test that can assert about the wrong rule is not a slow test, it is a wrong one, and a
green wrong test costs more than no test because it is believed.

AGENTS.md now records the class instead: layout has to be verified in a real browser over
CDP, with a dedicated `--user-data-dir` (reusing the default profile makes the instance exit
immediately, which cost more time than the bug) and screenshots, never by matching CSS text.

215 tests (was 215), oxlint 0, registry ok, both changelog ledgers.
@DoodleBears
DoodleBears merged commit 425cd63 into main Oct 1, 2026
1 check passed
@DoodleBears
DoodleBears deleted the fix/stage-controls-track-eats-field branch October 1, 2026 06:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant