From 07129decda237df0bcd522eb89f118c27fa53445 Mon Sep 17 00:00:00 2001 From: miguelcalderons Date: Wed, 19 Aug 2026 14:25:46 -0400 Subject: [PATCH] Upgrade/Install: Fix uneven margin and misaligned icon in update notices. 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 #10866 (props ShaneMuir) and PR #10876 (props manishdhorepatil-art), the latter of which no longer applied cleanly against current trunk. Trac ticket: https://core.trac.wordpress.org/ticket/64588 --- src/wp-admin/css/common.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 980702d31fb80..5b02f689ac99d 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -576,6 +576,10 @@ code { margin-left: 0; } +.js-update-details-toggle { + line-height: inherit; +} + .js-update-details-toggle .dashicons { text-decoration: none; } @@ -1493,7 +1497,7 @@ div[class="update-message"] { /* back-compat for pre-4.6 */ div.updated p, div.error p, .form-table td .notice p { - margin: 0.5em 0; + margin: 7px 0; padding: 0; font-size: 13px; line-height: 1.54;