[2.x] fix: stop the admin users heading inheriting the list header layout - #4997
Merged
Conversation
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
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 #4987
Changes proposed in this pull request:
AdminPagegives theAdminHeadera class derived from the page's own —`${className}-header`— so the users page header is rendered as<div class="AdminHeader UserListPage-header">. That's the same classUserListPageuses for the toolbar row above the grid (search, user count, Create User), andUsersListPage.lessstyles it as a flex row. The page header therefore picked updisplay: flex, which turned its.containerchild into a flex item;.container'smargin: 0 autothen centred it, leaving the gap to the left of "Users" on narrow viewports.:not(.AdminHeader), so it applies only to the toolbar row it was written for.I've scoped the selector rather than renaming the inner element's class. Renaming reads better, but
UserListPage-headeris a public-ish hook that themes and extensions may target, and I'm not willing to break that during RC for a cosmetic fix.A note on the bottom margin: the header was also inheriting
margin-bottom: 16px. Both selectors are single-class, andadmin.lessimportsAdminHeaderbeforeUsersListPage, so 16px was winning over the20pxthat.AdminHeaderdeclares for itself. With the rule scoped, the header goes back to 20px and matches every other admin page. It's a 4px change below the heading, and it's the value the header was always meant to have. Nothing else was inherited —align-itemsandcolumn-gapdo nothing withoutdisplay: flex.This isn't new in 2.x. The collision has been there since #3744 (May 2023) and is present in 1.8; it's worth fixing for GA because it's cheap and it's on a page every admin sees, not because it's a regression.
Reviewers should focus on:
className="UserListPage-header"string literal with noclassListmerge, so it can never carryAdminHeaderand still matches the scoped selector.Necessity
Confirmed
Required changes: