Repository navigation
[2.x] fix: align the drawer's dropdown labels with the other control labels - #5069
Merged
Merged
Conversation
`.Button` spaces an icon from its label with `gap: 7px`. `HeaderDropdown` also sets `margin-left: 7px` on the toggle's label, which predates that gap and now adds to it, so those toggles sit 14px from their icon while every other control in the same list sits at 7px. That went unnoticed while the drawer had no labelled icon rows to compare against. rc.8 made search a labelled button and scoped the icon-only collapse to `@media @tablet-up`, so the drawer now shows several labelled rows at once and the odd one out is visible. Dropping the margin lets `gap` do the spacing on its own. Verified on a 2.0.0-rc.8 install at 390px: search, flags, theme switcher and notifications all move onto the same 47.5px label edge. Nothing changes above `@tablet-up`, where these toggles collapse to `.Button--icon()` and hide their labels.
imorland
approved these changes
Oct 4, 2026
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
2 participants
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.
Fixes #5068.
.Buttonalready spaces an icon from its label withgap: 7pxinless/common/Button.less.less/forum/HeaderDropdown.lessalso setsmargin-left: 7pxon the toggle's label, which predates that gap and now adds to it, so a.HeaderDropdowntoggle sits 14px from its icon while every other control in the same list sits at 7px.That stayed invisible while the drawer had nothing labelled to compare against.
rc.8made search a labelled button and scoped the icon-only collapse to@media @tablet-up, so the drawer now renders several labelled icon rows at once and the mismatch shows as a ragged left edge.Verification
I removed the rule on a
2.0.0-rc.8install, let the assets recompile, and measured where each label starts in the drawer at a 390px viewport, signed in as an admin:Search ForumFlagged PostsSystem preferenceNotificationsAbove
@tablet-upnothing moves: those toggles collapse to.Button--icon(), which hides.Button-labeloutright.SessionDropdownkeeps its label up there but never carried theHeaderDropdownclass, so it is not affected either, which I confirmed both in the markup and by re-adding the rule at runtime and seeing its label stay put.The
Sign UpandLog Inrows still begin at the icon column rather than the label column, since they carry no icon at all. That is long standing behaviour and I have left it alone.