Keep the tag rail's Manage button out of the row that scrolls - #122
Merged
Merged
Conversation
Inside the scrolling row its margin-left: auto had no free space to claim once the tags overflowed, so it followed them out of the viewport — at forty tags it sat at x=2710 in a rail 1920 wide. Both rails also fade at the right edge now, so a row that scrolls says so. 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.
Closes #115.
.tag-railwas one flex row inoverflow-x: autocarrying the label, the pillsand the Manage button, and the button held its place with
margin-left: auto.That works until the tags overflow — and then stops, because
margin: autodistributes free space and there is none left. The button detached from the
right edge, followed the last pill, and left the viewport.
Measured, forty tags on a 1920-wide window
The pills now live in a
flex: 1box of their own that scrolls; the label andthe button sit outside it and stay put.
And the rail admits it scrolls
Both rails gained a fade on the right edge. It costs no measurement and no
JavaScript: the pills are left-aligned inside a
flex: 1box, so whileeverything fits the faded band falls on empty space and nothing shows.
The language rail gets the same rule. It has no trailing control to lose, so it
was never broken — but at a narrow window it hides formats with nothing saying
so, which is the same defect minus the casualty.
Test
Structural, in the unit suite: jsdom lays nothing out, so what is asserted is
that the button is not inside
.tag-rail-scroll, which is what keeps itreachable. The position numbers above came from driving the real binary and are
quoted in the PR rather than frozen into a test that would measure the runner.
Checked locally
npm test969 passing,npm run lintclean,npm run test:e2e15/15 in 4:03.🤖 Generated with Claude Code