Repository navigation
fix: the stage's controls track was eating the field - #19
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 anautotrack is sized bymax-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:
spiral(caption hidden)columns(caption shown)The stage is
overflow: hidden, so a zero-width track doesn't squash the field — itremoves it from the render. The DOM held all 25 cells with correct
fill-opacity; thepage showed nothing.
One declaration, verified in a browser (after:
264px / 338pxin both states):Special things to note
the capping is the fix, the number is a judgement about how wide the steppers should be.
getComputedStyle(el).gridTemplateColumnson a real gridrule returns the empty string. Nothing in this repo can catch a collapsed track.
component's
repeat(auto-fill, minmax(280px, 1fr))— so it went green with the bugpresent, and would have stayed green forever.
and a green wrong test costs more than no test, because it is believed.
AGENTS.mdrecords 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 instanceexit immediately — that cost more time than the bug did) and screenshots.
🤖 Generated with Claude Code