fix(ui): first-child, not first-of-type, for dialog headings - #762
Merged
Conversation
Spotted while taking a documentation screenshot of the Delivery tab: "Message Settings" was flush against the scope picker, measured 0px of gap. The heading margin added in #750 exempts the first heading in a tab, which is right when that heading starts the tab and wrong otherwise. :first-of-type matches the first h4 among its siblings whatever precedes it, so a heading that follows a control still lost its margin. :first-child is the predicate that matches the intent. Refs #730 Claude-Session: https://claude.ai/code/session_01Nah4N2sGFs1TU2t7DXfKzJ
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.
Found while screenshotting the Delivery tab for the documentation refresh: "Message Settings" sits flush against the scope picker above it. Measured in the browser —
margin-top: 0px, gap above0px.The heading margin from #750 exempts the first heading in a tab so it can start flush.
:first-of-typematches the firsth4among its siblings regardless of what precedes it, so the Delivery tab's heading — which followsapp-scope-picker— was exempted too.:first-childis what the exemption meant.Trialled in the browser before changing anything: with the corrected predicate the gap measures 24px.
The other
:first-of-typein the codebase (profile-overview.component.scss) is a different, correct case — sibling panels of the same type, where the first one genuinely wants the different margin. Left alone.https://claude.ai/code/session_01Nah4N2sGFs1TU2t7DXfKzJ