Fix ID generator note, dropdown styling and preset display; polish sidebar - #4
Merged
Merged
Conversation
…debar Four things, three of which were my bugs. The security note in the ID generator rendered as overlapping fragments. The paragraph had `display: flex`, which promotes every inline child to a flex item -- so "Generated with", the inline <code>, and the remaining sentence were laid out as three siblings in a row rather than as flowing text. It is a plain block again, with the icon inline. Dropdowns had cramped padding and the native arrow sat outside the padding box, colliding with the border at a 28px control height. The native arrow cannot be styled, so it is suppressed with appearance-none and replaced by a chevron drawn as a background image, with padding reserved for it. The preset dropdown always read "Preset..." because its value was hardcoded empty -- it worked as an action menu but read as broken, which is the same thing from the user's side. It now shows whichever preset the current options match. That is derived from the options rather than stored, so it survives a reload and falls back to "Custom" the moment any field changes, with no state to keep in sync. The sidebar collapse control moves from the bottom of the tool list to the top, where it is visible without scrolling, and the width now animates with the labels fading in behind it. Both are disabled under prefers-reduced-motion.
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.
1. Overlapping text in the ID generator note
The paragraph had
display: flex. That promotes every inline child to a flex item — soGenerated with, the inline<code>, and the rest of the sentence were laid out as three siblings in a row instead of flowing as text. Hence the overlap.It is a plain block again with the icon inline, and the code reference now sits in a subtle chip.
2. Preset dropdown "doesn't select" — not intended, now fixed
Its value was hardcoded to
"", so it always snapped back toPreset…. I had built it as an action menu; you read it as broken, which is the same thing from your side.It now shows whichever preset the current options match. That is derived from the options rather than stored, so it survives a reload and falls back to
Customthe instant you change any field — no state to keep in sync, and it cannot lie about what is loaded.3. Dropdown padding and the escaping arrow
The native
<select>arrow sits outside the padding box and cannot be styled, so at our 28px control height it collided with the border. Suppressed withappearance-noneand replaced by a chevron drawn as a background image, withpadding-right: 32pxreserved for it and a comfortable left inset.Applies to every dropdown in the app, not just this tool.
4. Sidebar
Control moved from the bottom of the tool list to the top, where it is visible without scrolling. Width now animates (200ms), with labels fading in so they do not appear fully formed before the animation finishes. Both disabled under
prefers-reduced-motion.Verification
14 browser assertions against the real app, including the ones that would have caught these in the first place:
display: block, the<code>is inside the paragraph's box, height is sane rather than collapsedappearance: none, a chevron background,padding-right ≥ 24pxStripe secret key, thenCustomafter a field editwidth, toggle is< 40pxfrom the top, collapses to 52px and the toggle stays reachablePlus 4 new unit tests for the preset matcher (334 total), and typecheck, lint and build clean.
Merging this cuts v0.2.3
### Fixedand### Changedonly → patch.It is also the second exercise of the corrected release chain — PR #3 fixed the dispatch, so if that landed first this one should tag and deploy without intervention.