Site Health: heading misaligned when Hello Dolly is active

[afercia]

Noticed on #46647:

When Hello Dolly is active, the Site Health main heading is misaligned:

While it's a minor gitch, the top part of the Site Health pages has a new, unique, design and hasn't been tested in some specific scenarios. Hello Dolly active is one of them.

One more notable scenario is: what happens when a WordPress notice is rendered in these pages?

[xkon]

notice

[xkon]

I've added a test notice just to see what happens as @afercia mentioned and sharing a screenshot of what I see at least.

I have never seen how notices work actually so I did some research finding that the notices are going after .wrap h1, .wrap h2 ( found this in common.js so correct me if I'm wrong ).

Would it be a bold move especially at this point to think of adding a "custom" placeholder as well for the notices to spawn at instead of the first available h1/h2 within wrap? This isn't related to Site Health in specific but a broader thinking of how it currently works as it seems way to restrictive.

Not really sure if adding an extra empty wrap/h1 above the Site Health wrapper be ok as well just to move the notices on a better spot as an empty h1 might lead into other issues.

[afercia]

@xkon yep notices are moved via JavaScript. I've just finished testing a couple cases and took a couple screenshots, will create a new ticket.

[afercia]

See #46651

[xkon]

Thanks for splitting the notices into a different ticket @afercia , to continue with this I've checked how Hello Dolly behaves on mobile as well and it goes into a float: none; placement that pushes the header down as seen in hello_dolly_mobile.jpg​ .

One way here would be to simply add a clear: both; on body.site-health .health-check-header ( see header_clear_both.jpg​ ) to have a similar "view" on bigger screens as well. Even though it will again push the overall header lower it will be inline with both views.

An alternative solution if we want to keep Hello Dolly "within" the white header might be to clear the body.site-health .health-check-header .title-section ( see title_clear_both.jpg​ ) instead ( but this would result in different views between mobile/bigger screens).

Even though both really small changes, i'm uploading 2 diffs just for a quicker live preview if needed.

[afercia]

@xkon thanks for your exploration :) Personally I have no strong preferences. Thinking this needs a quick design feedback.

[swissspidy]

46650.title.clear.both.diff​ / title_clear_both.jpg​ looks reasonable

[afercia]

In 45072:

Administration: Improve the CSS for the Site Health pages header.

Avoids the Site Health pages header layout to break when the Hello Dolly plugin or other floated content is printed out at the top of the page.

Props xkon.
Fixes #46650.