Align the link-wrapped badges with the bare ones - #36
Merged
Merged
Conversation
Pinning the badge images to 28px fixed three of the five. Two of them
— release and license — are wrapped in links, and there the flex item
is the <a>, not the image. An inline image inside an anchor carries
line-box leading, so those two items were 37.5px tall against the bare
images' 30px (28px plus a debug outline), and they sat higher in the
row. That 37.5px was also what set the line's cross size and stretched
the bare images in the first place, so this was the root cause, not a
second bug.
Measured per element by outlining images and anchors in different
colours and decoding the render:
before images top 113.5 bottom 143.0 height 30.0
anchors top 110.0 bottom 147.0 height 37.5
after both top 110.0 bottom 139.5 height 30.0
The row zeroes its line-height, the anchors become flex boxes that hug
their image, and the images are display: block so no baseline gap is
left underneath.
Tests: 1,108 -> 1,109.
Co-Authored-By: Claude Opus 5 (1M context) <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.
Pinning the badge images to 28px in #33 fixed three of the five. It didn't fix the other two, and this is why.
Cause
Two badges — release and license — are wrapped in links. There the flex item is the
<a>, not the image, and an inline image inside an anchor carries line-box leading. So those two items were 37.5px tall against the bare images' 30px, and sat higher in the row.That 37.5px is also what set the flex line's cross size and stretched the bare images in the first place, so this was the root cause all along rather than a second, separate bug.
Measured per element, by outlining images and anchors in different colours and decoding the render:
(30.0 is the 28px badge plus a 1px debug outline top and bottom.)
Fix
line-height, which is where the leading came fromdisplay: block, so no baseline gap is left underneathTests
1,108 → 1,109. While adding the guard I found the one I wrote in #33 asserted the CSS rule as an exact string, so editing that rule broke it — both guards are property-based now, checking the declarations that matter rather than the literal text.
🤖 Generated with Claude Code