Text not vertically centered on site-health.php

[Presskopp]

The titles are not vertically centered.

Patch would be st. like adding

.health-check-accordion-trigger .title {
    padding-top: 3px;
}

[Presskopp]

left unpatched, right with padding-top: 3px;

[odminstudios]

Css padding was fixed. 47063.diff​ could be ignored, pls use 47063.2.diff​

[desrosj]

I am seeing the text vertically centered on desktop, but not on mobile.

@Presskopp If you are still seeing this off centered can you give some more details about which browser you are using?

For mobile, there is a margin-bottom on .health-check-accordion-trigger .title. This can either be removed (which would result in a smaller button), or changed to margin: 0.5em 0;, which would center the text with the down arrow.

[desrosj]

@clorith Do you recall a reason for the mobile accordion headers being so large? Or why there was a large bottom margin?

[Presskopp]

The issue is only on the Status view, in Chrome and Firefox as well (desktop) - mobile view is not ok anyway

[desrosj]

@Presskopp Ah! I see it now, thanks!

I see why there is a margin now. It is to provide spacing between the text and a badge, but badges do not exist on the Info tab. Changing the margin from a margin-bottom on the title to margin-top on the badge helps the mobile issue for the Info tab but does compacts a bit.

Making the text "centered" is also a bit difficult. The badge has a padding defined as 0.1rem 0.5rem 0.15rem. This is to ensure that characters like y are fully contained in the outline of the badge. The same top padding can be applied to the title and it would line up with the badge text, but it would still not truly be vertically centered. It also results in the text also being slightly not centered on the Info tab (though it's not really noticeable and feels centered).

47063.3.diff​ makes both of these changes. I'd love to get some design feedback on this. Mainly the shortening of the accordions on the Info tab. (CC: @melchoyce @karmatosed)

Another thing to note, the loading GIF does not show correctly on the Info tab, but this is a preexisting issue.

[Presskopp]

I'd prefer a setting of padding-top: 0.15rem; but this would need to only apply on the 'Status' view..

[kjellr]

👋 This ticket was discussed in the #design triage today.

In general, the text here should definitely be visually centered in all cases. It'd be preferable to have the panels in both the Status and Info sections be the same height — stylistically these are mimicking the panels in Gutenberg, which have a minimum height of 46px (I'm not sure why the ones with in the Status screen work out to 48px here).

Would it be possible to rely on flexbox to get all of the the interior elements centered vertically? At a glance, that seems like it'd be a simpler solution than trying to get this working with margin/padding.

[afercia]

I'm not sure WordPress should encourage the usage of arbitrary rem / em values when there's not a clear math behind the value used. Things like padding-top: 0.1rem; produce a computed value of 1.6 pixels. This is subject to browsers rounding and on a screen, a pixel can't be split anyways.

The root cause of this issue is that the elements within the accordions have different heights. For example:

• the text has a (line) height of 16 pixels (inherits normal from the browser's default for buttons)
• the badges height is ~22 pixels: also in this case the padding values 0.1rem 0.5rem 0.15rem produce computed values with decimals

I'd second @kjellr flexbox would be a better option but it should take into account that in the responsive view the badges should be repositioned and aligned to the left.

[kjellr]

I've added another patch, 47063.4.diff which uses flexbox to center the text. It leaves the mobile view alone:

[afercia]

@kjellr 47063.4.diff​ works nicely on modern browsers. I seemed to recall a problem in IE 11 with absolutely positioned flex items and in fact IE 11 still takes them into calculation for justify-content: space-between;. See screenshot below. Setting flex-grow: 1 on the first span should fix it.

Maybe also check if some properties are still needed, for example:

• display: inline-block; on the first item? this is now a flex item
• float: right (and left) on the second item?

[afercia]

IE 11 and justify-content: space-between

[kjellr]

Thanks, @afercia! All great suggestions. 47063.5.diff​ incorporates all of those. My Windows VM is broken at the moment — would you mind verifying that the flex-grow trick for IE11 worked in this case? Thanks again.

[afercia]

Thanks @kjellr! Looks good in IE 11, see first screenshot attached below.

There's now a problem with the "Directories and Sizes" spinner though. It happens also with the previous patch, see second screenshot attached below. The spinner absolute positioning can't work correctly. Not sure what to do other than move the spinner <span> within the title <span>, remove the absolute positioning and treat it like an inline element.

[afercia]

Spinner misplaced in all browsers.

[kjellr]

Great catch again! I agree — I think placing the spinner within the title span seems to be the best route here. However, I think keeping the absolute positioning makes sense in order to ensure that it doesn't add some extra height to the button when it's invisible.

For 47063.6.diff​ I did a little reworking in general — turns out the mobile view of the Info page was still broken in prior patches:

This should be more of a universal fix for all breakpoints. While I was in there, I also added a minimum 46px height for these panels to meet the usual minimum recommended button size, and to align them with the panel height used in Gutenberg.

Desktop

Mobile

[desrosj]

#47203 was marked as a duplicate.

[desrosj]

47063.6.diff​ is looking good in my testing. I found a few issues that I attached screenshots for. Note: all my testing was done on MacOS.

• On mobile sized screens, the loading GIF is a bit tight to the line above it when the headings carry to the next line. I don't necessarily think this needs to be fixed, but wanted to call it out (spotted this in Firefox).
• It seems that the accordion arrow can overlap the loading GIF (spotted in Firefox).
• In Chrome, the loading GIF is still on the next line.

Also, props should go out to @xavortm and WC Plovdiv contributor's day for beginning to explore the problem with the loading GIF over on #47203. This solution supersedes the one worked on there.

[afercia]

turns out the mobile view of the Info page was still broken in prior patches:

Yep, #47203 was created to specifically address the spinner and accordions in the Info page. No objections to address those here, as the fix on this ticket uses a more solid approach. Still thinking the spinner position should not be absolute though, for heh issues outlined in the screenshots from @desrosj.

[kjellr]

Thanks for the testing, folks. By far, the simplest way to solve all of these issues (given the way the code is setup right now at least) would be to right-align the spinner like so:

You can try this out in 47063.7.diff​. It works excellently on small screens, but gets a little disconnected from the title on larger screens — I'd love some extra design eyes from @hedgefield.

[hedgefield]

@kjellr thanks for working on this, it looks good to me! I'm not too worried about large screens, there's a max width on the collapsibles column, and just the title of an item isn't super actionable by itself, so you'd already move your focus to click on the arrow and then you come across the spinner naturally anyway.

[kjellr]

Good catch, @desrosj. 47063.7.2.diff​ includes a fix for that bug. 👍

[desrosj]

Thanks, @kjellr! You're fast!

I also do not mind the right aligned loading GIF. I feel my eye is naturally drawn to the arrow, so the GIF feels at home.

I was going to say that I think this is close, but after 47063.7.2.diff​ I think it's good to go. @ianbelanger or @afercia, can you just confirm on Windows/ IE 11?

[ianbelanger]

47063.7.2.diff​ fixes all of the prior issues in Windows / IE11. I would say that this is GTG.

[desrosj]

In 45322:

Site Health: Improve alignment and spacing for section headers.

This changes the CSS for Site Health headers to use flexbox, which helps ensure the text is vertically aligned center and consistently spaced in both the Status and Info tabs. It also fixes an issue where the loading spinner GIF was cut off on smaller screens (originally reported in #47203.

Props Presskopp, odminstudios, kjellr, afercia, desrosj, hedgefield, ianbelanger, xavortm.
Fixes #47063.

[desrosj]

Reopening to backport.

[desrosj]

In 45323:

Site Health: Improve alignment and spacing for section headers.

This changes the CSS for Site Health headers to use flexbox, which helps ensure the text is vertically aligned center and consistently spaced in both the Status and Info tabs. It also fixes an issue where the loading spinner GIF was cut off on smaller screens (originally reported in #47203.

Merges [45322] to the 5.2 branch.

Props Presskopp, odminstudios, kjellr, afercia, desrosj, hedgefield, ianbelanger, xavortm.
Fixes #47063.

[kjellr]

Thanks, everyone!