Make WordPress Core

Opened 12 months ago

Closed 12 months ago

Last modified 9 months ago

#46650 closed defect (bug) (fixed)

Site Health: heading misaligned when Hello Dolly is active

Reported by: afercia Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: minor Version: 5.2
Component: Site Health Keywords: has-screenshots site-health
Focuses: Cc:


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?

Attachments (6)

1553591026.jpg (105.4 KB) - added by xkon 12 months ago.
hello_dolly_mobile.jpg (29.6 KB) - added by xkon 12 months ago.
header_clear_both.jpg (46.5 KB) - added by xkon 12 months ago.
title_clear_both.jpg (40.7 KB) - added by xkon 12 months ago.
46650.header.clear.both.diff (408 bytes) - added by xkon 12 months ago.
46650.title.clear.both.diff (414 bytes) - added by xkon 12 months ago.

Download all attachments as: .zip

Change History (15)

12 months ago


#1 @xkon
12 months ago

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.

#2 @afercia
12 months ago

@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.

#4 @xkon
12 months ago

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).

Version 0, edited 12 months ago by xkon (next)

#5 @afercia
12 months ago

  • Keywords needs-design-feedback added

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

#6 @swissspidy
12 months ago

  • Milestone changed from Awaiting Review to 5.2
  • Severity changed from normal to minor

#7 @afercia
12 months ago

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

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.

#8 @afercia
12 months ago

  • Keywords needs-design-feedback removed

#9 @spacedmonkey
9 months ago

  • Component changed from Administration to Site Health
Note: See TracTickets for help on using tickets.