Administration: Fix the update button layout in At a Glance - #12715
Administration: Fix the update button layout in At a Glance#12715itzmekhokan wants to merge 1 commit into
Conversation
The 'Update to n.n.n' button was floated out of the version message line box and nudged up by five pixels. Since the admin reskin increased the button height to 40 pixels, the float no longer fitted the space it left behind and overflowed the bottom of the 'At a Glance' widget. Lay the version message out with flexbox instead. The button is now part of the paragraph's flow, so the widget grows to contain it, and its text baseline is aligned with the version text. Fixes #65733.
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
There was a problem hiding this comment.
Pull request overview
This PR updates the CSS for the “At a Glance” dashboard widget’s WordPress version message to use a flexbox layout so the core update button stays contained within the widget and can align to the version text baseline, replacing the prior float/relative-position hack.
Changes:
- Make
#dashboard_right_now #wp-version-messagea flex container with wrapping and baseline alignment. - Make
#dashboard_right_now #wp-versionflex to keep the update button on the same line when possible. - Replace the update button’s float/offset positioning with flex ordering and auto margin alignment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| #dashboard_right_now #wp-version-message { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-items: baseline; | ||
| gap: 5px; | ||
| } | ||
|
|
||
| #dashboard_right_now #wp-version { | ||
| flex: 1; | ||
| } | ||
|
|
||
| #dashboard_right_now #wp-version-message .button { | ||
| float: right; | ||
| position: relative; | ||
| top: -5px; | ||
| margin-left: 5px; | ||
| /* The button is first in the markup, but is displayed after the version text. */ | ||
| order: 1; | ||
| margin-left: auto; | ||
| } |
Lays out the 'At a Glance' version message with flexbox so the 'Update to n.n.n' button stays inside the widget and its text baseline aligns with the version text.
What the problem was:
.wp-core-ui .buttontomin-height: 40px, so the float no longer fits the ~18px line box it vacated. It eats the widget's 12px bottom padding and overflows the postbox border by 3px.What the fix does:
#wp-version-messagea flex container withalign-items: baseline, so the paragraph contains the button and both baselines align.order: 1andmargin-left: autokeep the button visually last and flush right, replacingfloat: right.flex: 1on#wp-versionkeeps the button on the first line of text, matching the previous float layout instead of pushing it onto its own line.flex-wrap: wrappreserves the intent of [31812] for long strings, e.g. long translated button labels in narrow widgets.Approach and why:
update_right_now_textfilter stays inside#wp-versionand is unaffected.gapin a flex context already has precedent in this file (.community-events-form).dashboard-rtl.css:margin-left: autoflips tomargin-right: autoand every other declaration is direction-agnostic.Trac ticket: https://core.trac.wordpress.org/ticket/65733
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: Ticket analysis, verified tests and writing PR description. All changes were reviewed and validated by me
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.