WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 7 months ago

Last modified 6 months ago

#47203 closed defect (bug) (duplicate)

Site Health: Loading gif is cut off on mobile

Reported by: desrosj Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: has-screenshots good-first-bug has-patch site-health
Focuses: Cc:
PR Number:

Description (last modified by SergeyBiryukov)

When using the Info tab in mobile, the loading gif is cut off.

Related: #47063 (text not being centered).

Attachments (4)

mobile-view.png (11.6 KB) - added by desrosj 7 months ago.
47203.diff (56.2 KB) - added by xavortm 7 months ago.
47203.2.diff (1.1 KB) - added by afercia 7 months ago.
47203.3.diff (1.2 KB) - added by xavortm 7 months ago.

Download all attachments as: .zip

Change History (14)

@desrosj
7 months ago

#1 @desrosj
7 months ago

  • Keywords good-first-bug added

#2 @afercia
7 months ago

Seems simple enough to be fixed in 5.2.1?

#3 @afercia
7 months ago

Introduced in [45229] see #46949. Fixing it needs to take into account that in the "Status" page accordions there are "badges", while in the "Info" page there's none. I'd try to scope the [45229] changes in the media query to the "Status" page.

#4 @SergeyBiryukov
7 months ago

  • Description modified (diff)

@xavortm
7 months ago

#5 @xavortm
7 months ago

  • Keywords has-patch added; needs-patch removed

Applied a change that increases the spacing underneath the tab titles so that it can be easily read. Note though, I am uncertain if the class used for the case where spinner is added is all needed to fix the bug - meaning, there could be other places with the same component, that doesn't use the same class.

Also cheers from WC Plovdiv contributor's day

#6 @afercia
7 months ago

  • Keywords site-health added

@afercia
7 months ago

#7 @afercia
7 months ago

  • Milestone changed from 5.3 to 5.2.1

Thanks @xavortm and hello WC Plovdiv contributor's day! Yep, as you pointed out, not sure adding a bottom padding to all the accordions is desirable. 47203.2.diff tries a different approach:

  • adds a health-check-status-tab class to better scope the Status tab from the Info one, which already uses health-check-debug-tab
  • scopes the CSS changes for the "badges" introduced in [45229] to the Status tab

As this fix seems to me simple enough, I'd like to propose it for 5.2.1 consideration.

Some testing would be nice:

  • in the Status tab: in the responsive view, the "badges" should be left aligned
  • in the Info tab: in the responsive view, the loading spinner in the "Directories and Sizes" accordion should be fully visible

@xavortm
7 months ago

#8 @xavortm
7 months ago

Huh yep, that definitely looks smarter;

With the patch applied, on status: http://i.imgur.com/WTUGs6W.png (left aligned) and on info tab, it is next to the labels: http://i.imgur.com/UHTc9F0.png

I only thought that it is not perfectly aligned vertically, so added -2px in the margin property and checked also on desktop - http://i.imgur.com/YSmTNDS.png Safari also looks good.

#9 @desrosj
7 months ago

  • Milestone 5.2.1 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

I'm going to close this out as a duplicate of #47063. The solution there expanded to rework the CSS for the accordion triggers to use flexbox and is now accounting for this bug.

If I am missing something and these changes are still required to fix the issue, please reopen.

@xavortm @afercia Thank you for your work on this!

#10 @spacedmonkey
6 months ago

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