Upgrade/Install: Fix uneven margin and misaligned icon in update notices - #13179
Upgrade/Install: Fix uneven margin and misaligned icon in update notices#13179miguelcalderons wants to merge 1 commit into
Conversation
…ces. The "Plugin updated successfully. More details." notice (and other .notice/.updated/.error paragraphs) used a margin of 0.5em, which computes to a fractional 6.5px. Browsers round that inconsistently to whole device pixels depending on zoom/DPI, producing a visibly uneven 6px/7px top/bottom margin. Using an integer 7px removes the rounding ambiguity entirely. Separately, the "More details" toggle button's line-height didn't match the surrounding paragraph's (browser default vs. 20.02px), so its dashicon sat off the text baseline. Making it inherit the paragraph's line-height fixes that independent misalignment. Verified via computed styles that both fixes are needed together: with only the margin fix, the toggle's icon is still off-baseline; with only the line-height fix, the margin remains at the rounding-prone 6.5px. Combines and rebases the fixes from PR WordPress#10866 (props ShaneMuir) and PR WordPress#10876 (props manishdhorepatil-art), the latter of which no longer applied cleanly against current trunk. Trac ticket: https://core.trac.wordpress.org/ticket/64588
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @miguelcalderons. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
1 participant
The "Plugin updated successfully. More details." notice (and other
.notice/.updated/.errorparagraphs) usesmargin: 0.5em 0, which computes to a fractional6.5px. Browsers round that inconsistently to whole device pixels depending on zoom/DPI, producing a visibly uneven 6px/7px top/bottom margin. Using an integer7pxremoves the rounding ambiguity entirely.Separately, the "More details" toggle button's
line-heightdidn't match the surrounding paragraph's (browser defaultnormalvs.20.02px), so its dashicon sat off the text baseline. Making it inherit the paragraph's line-height fixes that independent misalignment.I tested this locally by applying each existing fix in isolation and measuring computed styles on the actual markup from
class-bulk-upgrader-skin.php:7px/7px6.5px/6.5px7px/7pxnormal≠20.02px20.02px=20.02px20.02px=20.02pxBoth changes are needed — they fix two different things that got conflated in the ticket discussion, not two competing solutions to the same bug.
This combines and rebases the fixes proposed in #10866 (props @ShaneMuir) and #10876 (props @manishdhorepatil-art), the latter of which no longer applies cleanly against current trunk.
Trac ticket: https://core.trac.wordpress.org/ticket/64588
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Sonnet 5
Used for: Diagnosing and testing the two prior candidate fixes (measuring computed styles before/after each), and authoring/rebasing this combined patch. Reviewed by me before submitting.