Admin UI: ensure consistent header spacing with and without actions#76683
Open
Admin UI: ensure consistent header spacing with and without actions#76683
Conversation
simison
commented
Mar 19, 2026
| } | ||
|
|
||
| .admin-ui-page__header-content { | ||
| min-height: 40px; |
Member
Author
There was a problem hiding this comment.
This magic number comes from here:
I'm not sure if we should try to match button (and compact or default size?) height with variables, or if this method is good enough?
Member
Author
There was a problem hiding this comment.
Oh, and compact buttons are 32px, but 40px accommodates normal-sized buttons too.
Contributor
There was a problem hiding this comment.
We could use the DS size tokens that @jameskoster is working on in #76545
Contributor
There was a problem hiding this comment.
I think the plan (#76709) is to enforce compact buttons, so I guess the value should be 32px. WDYT?
simison
commented
Mar 19, 2026
| z-index: 1; | ||
| } | ||
|
|
||
| .admin-ui-page__header-content { |
Member
Author
There was a problem hiding this comment.
Taking suggestions for better name since this doesn't actually consist everything, only most things. Notably, it excludes subtitle.
Contributor
There was a problem hiding this comment.
Should we use css grid for the layout? Then I think we wouldn't need this container 🤔 Hacky codepen.
simison
commented
Mar 19, 2026
Comment on lines
+60
to
+61
| style={ { width: 'auto', flexShrink: 0 } } | ||
| className="admin-ui-page__header-actions" |
Member
Author
There was a problem hiding this comment.
I could see moving these inline styles to the class, too. 🤔
Contributor
There was a problem hiding this comment.
Yup, better to move them to inline styles
simison
added
[Type] Enhancement
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +208 B (0%) Total Size: 7.66 MB
ℹ️ View Unchanged
|
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
3 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.
See design convo #76709
Follow-up to findings in title/breadcrumb size adjustment PR:
What?
Part of the changes suggested in:
Set consistent height for title + breadcrumbs + badge + actions row; previously, the row height would depend on whether there were actions or not, making the gap between title and subtitle inconsistent.
Also stops outputting the actions container if there are no actions.
Set consistent height for title + breadcrumbs + badge + actions row
All patterns
Before
After
Connectors
Before
After
Fonts
Before
After
Helps with the gap between the title row and the subtitle to always stay consistent regardless if there are actions or not.
Don't output actions container if there are no actions
Before
After
Why?
How?
Testing Instructions
Screenshots or screencast
Use of AI Tools