Site health status widget unwanted margin

[simkog]

Dear Developers,

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

Because of that, the two columns not align properly.

[sabernhardt]

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]

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

[costdev]

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]

Previews of 56369.1.diff and 56369.2.diff.

[mukesh27]

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?

[costdev]

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.

[Clorith]

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.

[sabernhardt]

Props: simkog added manually