Make WordPress Core

Opened 5 weeks ago

Last modified 5 weeks ago

#64588 new defect (bug)

Update message slightly uneven

Reported by: presskopp's profile Presskopp Owned by:
Milestone: Awaiting Review Priority: normal
Severity: trivial Version:
Component: Upgrade/Install Keywords: good-first-bug has-screenshots has-patch
Focuses: ui, css, administration Cc:

Description

After updating a plugin there's a message "Plugin updated successfully. More details." The margin is 1px off. It has a top margin of 6px and a bottom margin of 7px. Because it's only 1px, it's hard to show.

The values are calculated by

.notice p, .notice-title, div.updated p, div.error p, .form-table td .notice p {
    margin: 0.5em 0;

The computed values are 6.5px. I assume one time it gets rounded down, on time up.

Attachments (1)

um.png (4.8 KB) - added by Presskopp 5 weeks ago.

Download all attachments as: .zip

Change History (9)

@Presskopp
5 weeks ago

#1 @Presskopp
5 weeks ago

this is Chrome 144.0.7559.110 on Windows 11, btw. - but the issue has been around for some time.

#2 @sabernhardt
5 weeks ago

  • Component changed from Administration to Upgrade/Install
  • Severity changed from minor to trivial

The discrepancy on update-core.php is in the line-height, not the margin.

  • Paragraph line-height is 1.5, or 19.5 pixels.
  • The 'More details' button has a normal line-height from the default user agent stylesheet.
  • The icon inside the button has a line-height of 1, equal to 20 pixels.

If the button inherits the line-height, that can move the triangle icon up one pixel (and reduce the space below the paragraph by one pixel).

.js-update-details-toggle {
    line-height: inherit;
}
Last edited 5 weeks ago by sabernhardt (previous) (diff)

#3 @Presskopp
5 weeks ago

  • Keywords good-first-bug added; has-screenshots removed

#4 @Presskopp
5 weeks ago

  • Keywords has-screenshots added

This ticket was mentioned in PR #10866 on WordPress/wordpress-develop by @shanemuir.


5 weeks ago
#5

  • Keywords has-patch added

This ticket was mentioned in PR #10876 on WordPress/wordpress-develop by @manishxdp.


5 weeks ago
#6

Fixes #64588

Changes the margin from 6px 0 to 7px 0 for .notice p and related selectors to ensure equal top and bottom margins, avoiding rounding issues that occur with 0.5em (which computes to 6.5px and can round differently).

Fixes a 1px vertical spacing inconsistency in admin update notices caused by subpixel rounding of 0.5em margins.

Changes the margin for .notice p (and related selectors) from 0.5em 0 (~6.5px) to 7px 0 to ensure consistent top and bottom spacing across browsers.

Fixes #64588

Trac ticket: https://core.trac.wordpress.org/ticket/64588

Testing Instructions

Go to Dashboard → Updates

Trigger any admin notice (e.g., plugin update available)

Inspect the notice message text spacing

Confirm that:

Top and bottom spacing of the paragraph text inside notices is visually equal

No 1px vertical misalignment is visible

Compare before/after patch if possible

@mukesh27 commented on PR #10876:


5 weeks ago
#7

Why this approach is taken as discussed in ticket https://core.trac.wordpress.org/ticket/64588#comment:2 the PR #10866 solve the issue 🤔

@manishxdp commented on PR #10876:


5 weeks ago
#8

@mukeshpanchal27 this is the ticket #64588
https://core.trac.wordpress.org/ticket/64588

Note: See TracTickets for help on using tickets.