Spread the menu entries across the width of the bar - #26
Merged
Conversation
The five nav entries sat bunched in the middle of an otherwise empty green bar. Lay the list out as a flex row and distribute it with space-evenly, so the gaps between neighbours and at the two ends are all equal and the bar is used over its full width. column-gap is the minimum the spacing may fall to; below that the row wraps. From 800px down the layout switches back to centred, because spreading a wrapped list edge to edge leaves a lopsided last row. Replace the per-item left/right margins with that gap while here. Two adjacent margins added up between neighbours but gave the ends only half as much, which is what made the row read as bunched. Claude-Session: https://claude.ai/code/session_01TtWDWoCaBcP1uFCK4e4RsJ
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 five nav entries sat bunched in the middle of an otherwise empty green bar. The list is now laid out as a flex row and distributed with
space-evenly, so the gaps between neighbours and at the two ends are equal and the bar is used over its full width.column-gapis the floor the spacing may never fall below; once it would, the row wraps instead. From 800px down the layout switches back to centred — spreading a wrapped list edge to edge leaves a lopsided last row.Also replaces the per-
<li>left/right margins with that gap. Two adjacent margins added up between neighbours but gave the row ends only half as much, which is what made the entries read as bunched in the first place.Checked in headless Chromium at 1200, 900, 780, 620, 480 and 360px: wrapped rows stay centred and nothing overflows at the narrowest width. CSS only — no markup change.
https://claude.ai/code/session_01TtWDWoCaBcP1uFCK4e4RsJ