Make WordPress Core

Opened 23 months ago

Closed 22 months ago

Last modified 21 months ago

#56369 closed enhancement (fixed)

Site health status widget unwanted margin

Reported by: simkog's profile simkog Owned by: clorith's profile Clorith
Milestone: 6.1 Priority: normal
Severity: minor Version: 5.3
Component: Site Health Keywords: has-patch
Focuses: ui, css, administration Cc:

Description

Dear Developers,

Inside the "Site Health Status" widget on the Dashboard Home there is an unwanted space after the progress bar.

https://i.imgur.com/2FOvTcc.png

Because of that, the two columns not align properly.

Attachments (3)

56369.1.diff (710 bytes) - added by costdev 23 months ago.
Remove bottom margin on the wrapper. This is only on the widget so that it doesn't affect the Site Health screen.
56369.2.diff (1.0 KB) - added by costdev 23 months ago.
Includes changes in 56369.1.diff. Plus: a) Remove top margin on first paragraph. b) Remove bottom margin on last paragraph. - This makes the top/bottom margins consistent with other Dashboard widgets.
56369-patches-preview.jpg (55.6 KB) - added by costdev 23 months ago.
Previews of 56369.1.diff and 56369.2.diff.

Download all attachments as: .zip

Change History (9)

#1 @sabernhardt
23 months ago

  • Component changed from Formatting to Site Health
  • Version trunk deleted

Welcome to Trac and thanks for the report!

The margin on the wrapper was added in r46106. It seems better without that, even at mobile widths, at least when the details section has the margins on paragraph elements.

@costdev
23 months ago

Remove bottom margin on the wrapper. This is only on the widget so that it doesn't affect the Site Health screen.

@costdev
23 months ago

Includes changes in 56369.1.diff. Plus: a) Remove top margin on first paragraph. b) Remove bottom margin on last paragraph. - This makes the top/bottom margins consistent with other Dashboard widgets.

@costdev
23 months ago

Previews of 56369.1.diff and 56369.2.diff.

#2 @costdev
23 months ago

  • Keywords has-patch needs-testing 2nd-opinion added
  • Milestone changed from Awaiting Review to 6.1
  • Version set to 5.3

#3 @mukesh27
23 months ago

Thanks for the patch @costdev. 56369.2.diff look good to me.

Question: in your patch you have remove below CSS from top and add it back with margin property is there any specific reason for doing that can we add that margin at top with existing CSS?

#4 @costdev
23 months ago

Thanks @mukesh27!

Just below the original position, the margin-bottom is set for .site-health-progress-wrapper.

As the element in question shares both the .health-check-widget-title-section and .site-health-progress-wrapper classes, attempting to set margin-bottom on .health-check-widget-title-section will be immediately overwritten just a few lines down.

The options I saw available were:

  1. Keep the .health-check-widget-title-section in place and add !important to the margin-bottom rule - a no-no.
  2. Set the margin-bottom for .health-check-widget-title-section further down.

Rather than have two styling blocks for .health-check-widget-title-section, I felt it best to keep these together.

Upon reviewing further down the file, I saw this comment:

/* Styling unique to the dashboard widget. */

Since the current styling for .health-check-widget-title-section should have been in this section anyway, I felt it best to move this into the correct section and add the new margin-bottom rule required for this patch.

In testing, I don't believe that moving the original styling block introduces a regression. However, if in testing by others, a regression is revealed, I'm happy to revise the patch.

#5 @Clorith
22 months ago

  • Owner set to Clorith
  • Resolution set to fixed
  • Status changed from new to closed

In 54197:

Site Health: Adjust margins for the Site Health dashboard widget.

This aligns the spacing within the widget with other core widgets, and removes an unintended margin which was pushing the indicator slightly above the centered position it was intended to have.

Props sabernhardt, costdev, mukesh27.
Fixes #56369.

#6 @sabernhardt
21 months ago

  • Keywords needs-testing 2nd-opinion removed

Props: simkog added manually

Note: See TracTickets for help on using tickets.