Line the strict band's progression picker up with the buttons beside it - #369
Merged
Conversation
The band's controls are one panel, and the cluster stretches every item to the line's height. The picker carried height: 28px, and a definite height opts a flex item out of align-self: stretch — so it sat at the top of a 32px row, its text 2px above every neighbour's, its hover tint 4px short of the buttons' (feedback 91bf14f9). Dropping the height is the whole fix: it now stretches like the rest. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
Preview supprimée (PR fermée). L'URL n'est plus accessible. |
The new test landed between that comment and its method. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
From the review of this change: the stylesheet comment retold the whole story the test already carries, the test measured through an inline IIFE where the file next door has a one-line helper, and the cluster's align-items: center was dead — every item overrides it with align-self: stretch. That last line is what made a per-item height look harmless, so it goes with a note saying why there is none. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
isc
added a commit
that referenced
this pull request
Sep 14, 2026
The buttons named `height: 34px` — the band's *outer* height. Inside its 1px border there are 32, and the cluster clips what overflows: a pixel top and bottom went under `overflow: hidden`, taking the top of their 4px corners and of the tint they take under a pointer, which ran flush into the band's rules instead of stopping short of them. They now take the line by stretching, the way every direct child of the cluster does — which is also why nothing moves at phone width, where the line is 34px and that is what they get. Found by measuring rather than by eye, in the sweep behind #373, and the last of that family: the same mistake put the progression picker 2px high (#369) and a line-height on an input whose content box was 18px. The thumb target is unchanged and still short: `overflow: hidden` clips the pseudo-element that grows it, hit testing included, so it is 44 wide and the band's 32 tall. Growing it needs a taller band or a cluster that does not clip — its own change, and a visible one. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
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
1 participant
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.
The strict band's controls are one panel, and the cluster stretches every
item to the line's height. The progression picker carried
height: 28pxof its own, and a definite height opts a flex item out of
align-self: stretch— so it sat at the top of a 32px row: its text 2pxabove every neighbour's, its hover tint 4px short of the buttons'
(feedback
91bf14f9).Dropping the height is the whole fix. It also puts the picker on the
34px row the phone breakpoint already sizes for, which the 28px was
quietly overriding there too.
Test
test_the_progression_picker_sits_on_the_band_controls_midlineintest/strict_playthrough_test.rbasserts the picker and the buttonsshare a midline. Checked that it fails with the
height: 28pxput back,run five times on its own, and once through the whole suite (134 runs,
0 failures).
No changelog entry: 2px of alignment is below the bar the modal holds.
🤖 Generated with Claude Code