Give the tag page topic chips room to breathe - #236
Merged
Conversation
The top chip row used var(--s-5), which is not a defined spacing token, so the whole margin shorthand was invalid and the row collapsed against the header rule above and the list below. Use real tokens, split the flex gap so wrapped chip rows get more vertical room, and pad the chips. 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 topic chip row above the tag page list sat flush against the header rule and the first guide row.
Cause:
.all-tags.topsetmargin: var(--s-4) 0 var(--s-5), and--s-5is not defined insite/src/styles/tokens.css(the scale runs 1, 2, 3, 4, 6, 8, 12, 16). One invalid token makes the entire shorthand invalid at computed-value time, so the row got no margin at all.Changes:
margin: var(--s-3) 0 var(--s-4)using real tokens.gap: 8pxintocolumn-gap: 8px/row-gap: 10pxso wrapped chip lines are not nearly touching.1px 9pxto3px 10px.Verified in a browser against the dev server at /tags/cost-control/, 1120px wide: computed margins are now 27px above and 36px below (previously 0 and 0), the two wrapped chip lines sit 10px apart, and chip padding is 3px 10px.
Note for later, outside this change:
site/src/components/SkillShelf.astro:123uses the same undefined--s-5formargin-top, so that margin is also silently zero.