WordPress.org

Make WordPress Core

Opened 16 months ago

Closed 16 months ago

Last modified 13 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:

Description

Noticed on #46647:

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

/raw-attachment/ticket/46647/copy-button.png

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 16 months ago.
notice
hello_dolly_mobile.jpg (29.6 KB) - added by xkon 16 months ago.
header_clear_both.jpg (46.5 KB) - added by xkon 16 months ago.
title_clear_both.jpg (40.7 KB) - added by xkon 16 months ago.
46650.header.clear.both.diff (408 bytes) - added by xkon 16 months ago.
46650.title.clear.both.diff (414 bytes) - added by xkon 16 months ago.

Download all attachments as: .zip

Change History (15)

@xkon
16 months ago

notice

#1 @xkon
16 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
16 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
16 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).

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

Last edited 16 months ago by xkon (previous) (diff)

#5 @afercia
16 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
16 months ago

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

#7 @afercia
16 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
16 months ago

  • Keywords needs-design-feedback removed

#9 @spacedmonkey
13 months ago

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