Drop the stylesheet rules nothing can reach - #373
Merged
Merged
Conversation
A sweep of styles.css for rules that are dead or that contradict themselves. Every class in the file is written somewhere, so what was left was rules whose *combination* never occurs, and declarations a later rule always undoes. The ⚙️ menu holds links, buttons, an <hr>, an <h4> and the FR/EN pill, and nothing else: the rules for a select, a label, its checkbox and a <small> had no element left to match since those controls moved to the data page. The generic `.pt-popover button` went too — the only bare buttons in the menu are the language pair, and `.pt-langswitch button`, at equal weight and further down the file, restates every one of its declarations. Its hover was the exception, being the tint the pill actually uses, so it is kept and says who it is for. `.pt-topbar input` never matched: the topbar carries a <select>, the part navigator, and no input on any page. The tempo field was written twice, and the second half undid the first: it only ever appears as a direct child of a band cluster, which sizes and aligns it, so its width, padding, border, background, colour and height were set and then replaced two rules later. It now has one definition. `line-height: 28px` on its input went with them — under border-box, with a 1px border and 4px of padding, the content box is 18px and the line could not apply. Nothing moves on screen: 26 states (every page, phone and desktop, the modals, the menu, the four bands, the journal, the calendar) captured before and after, and the one pixel that differs is under the noise two captures of the same code produce. Hover, which a screenshot does not see, is compared through the computed styles instead. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
Preview supprimée (PR fermée). L'URL n'est plus accessible. |
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.
A sweep of
public/styles.cssfor rules that are dead or thatcontradict themselves. 49 declarations out, 2241 → 2205 lines, and
nothing moves on screen.
Every class named in the file is written somewhere in the markup (the
pt-pill--*are built by string concatenation,measure-numberisemitted on the score), so there was no dead class to find. What was
left is subtler: rules whose combination never occurs, and
declarations that a later rule always undoes.
What went
.pt-popover select,label,label input[type=checkbox],small<hr>, an<h4>and the FR/EN pill. Those controls moved to the data page and left their rules behind..pt-popover button(9 declarations).pt-langswitch button— equal weight, further down the file — restates every one of its declarations..pt-topbar inputscore.htmland carries a<select>(the part navigator). Checked on a Hanon collection too, where that select is shown: no input..pt-bpm-field(11 declarations).pt-band-controls, which sizes and aligns it. Width, padding, border, background, colour and height were set and replaced two rules later.line-height: 28pxon the band's BPM inputborder-box, with a 1px border and 4px of padding on a 28px box, the content box is 18px. The line could not apply.Two rules with the same selector (
.pt-modebar > .pt-action-button,written twice in a row) are now one.
Two traps, both caught by measuring
border: noneon.pt-band-controls .pt-bpm-fieldlooked like thecomponent's border being undone. It is not: it outweighs the cluster's
> * + *divider, which the field is the one item not to take.Removing it shifted the whole band 1px and showed up in the captures
immediately. It is back, with a comment saying what it is for.
Re-scoping
.pt-popover button:hoverto.pt-popover .pt-langswitch button:hovertook it from (0,2,1) to(0,3,1) — enough to start beating
.pt-langswitch button[aria-pressed],so the language in use would have greyed out under the pointer:
white text on
rgb(241,243,247). Measured, confirmed, and preventedwith
:not([aria-pressed="true"]).How "nothing changed" was checked
26 states captured before and after with Playwright — the seven pages,
phone and desktop, the changelog and feedback modals, the ⚙️ menu, all
four bands, the journal, the calendar, the score in each mode. Compared
pixel by pixel with ImageMagick.
pixels — colour-emoji rasterisation varies between runs.
The diff is below the floor. Hover, which no screenshot sees, is
compared through computed styles instead: the pill at rest and hovered,
in both states, the menu rows, before and after.
Left standing, deliberately
.pt-bpm-field__stepis 34px inside a 32px content box withoverflow: hidden, so 2px of its hover tint and rounded corners areclipped — and the
::afterthat grows its touch target is clipped withthem. It is exactly the
line-heightcase, except the ≤600px blockmakes 34px right there, so it is wrong by 2px on desktop rather than
inert. Fixing it moves pixels, which this change is not for.
🤖 Generated with Claude Code