WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 7 months ago

Last modified 6 months ago

#47063 closed defect (bug) (fixed)

Text not vertically centered on site-health.php

Reported by: Presskopp Owned by: desrosj
Milestone: 5.2.1 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: has-screenshots has-patch site-health has-design-feedback
Focuses: ui Cc:
PR Number:

Description

The titles are not vertically centered.

Patch would be st. like adding

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

Attachments (20)

3px.jpg (79.1 KB) - added by Presskopp 7 months ago.
47063.diff (59.4 KB) - added by odminstudios 7 months ago.
47063.2.diff (349 bytes) - added by odminstudios 7 months ago.
desktop.png (15.5 KB) - added by desrosj 7 months ago.
mobile.png (16.0 KB) - added by desrosj 7 months ago.
47063.3.diff (603 bytes) - added by desrosj 7 months ago.
info-tab-fixed.png (80.1 KB) - added by desrosj 7 months ago.
47063.4.diff (765 bytes) - added by kjellr 7 months ago.
ie 11.png (116.3 KB) - added by afercia 7 months ago.
IE 11 and justify-content: space-between
47063.5.diff (1.2 KB) - added by kjellr 7 months ago.
47063.5 IE 11.png (161.3 KB) - added by afercia 7 months ago.
47063.5 spinner.png (29.9 KB) - added by afercia 7 months ago.
Spinner misplaced in all browsers.
47063.6.diff (2.1 KB) - added by kjellr 7 months ago.
really-long-title.png (93.5 KB) - added by desrosj 7 months ago.
arrow-overlap.png (81.8 KB) - added by desrosj 7 months ago.
chrome-issue.png (86.5 KB) - added by desrosj 7 months ago.
47063.7.diff (1.5 KB) - added by kjellr 7 months ago.
chrome.png (30.7 KB) - added by desrosj 7 months ago.
firefox.png (20.2 KB) - added by desrosj 7 months ago.
47063.7.2.diff (1.5 KB) - added by kjellr 7 months ago.

Download all attachments as: .zip

Change History (52)

@Presskopp
7 months ago

#1 @Presskopp
7 months ago

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

@odminstudios
7 months ago

#2 @odminstudios
7 months ago

  • Component changed from General to Administration
  • Keywords has-patch site-health added; needs-patch removed

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

This ticket was mentioned in Slack in #core by jorbin. View the logs.


7 months ago

#4 @SergeyBiryukov
7 months ago

  • Milestone changed from Awaiting Review to 5.2.1

@desrosj
7 months ago

@desrosj
7 months ago

#5 @desrosj
7 months ago

  • Keywords needs-refresh added

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.

#6 @desrosj
7 months ago

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

#7 @Presskopp
7 months ago

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

Last edited 7 months ago by Presskopp (previous) (diff)

@desrosj
7 months ago

#8 @desrosj
7 months ago

  • Keywords needs-design-feedback added; needs-refresh removed

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

#9 @Presskopp
7 months ago

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

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 months ago

#11 @kjellr
7 months ago

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

#12 @karmatosed
7 months ago

  • Keywords has-needs-design-feedback added; needs-design-feedback removed

#13 @afercia
7 months ago

  • Keywords has-design-feedback added; has-needs-design-feedback removed

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
7 months ago

#14 @kjellr
7 months ago

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

https://cldup.com/HTgp7NZBQf-3000x3000.png

https://cldup.com/1bGK7In6IL-3000x3000.png

#15 @afercia
7 months ago

@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
7 months ago

IE 11 and justify-content: space-between

@kjellr
7 months ago

#16 @kjellr
7 months ago

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.

#17 @afercia
7 months ago

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
7 months ago

Spinner misplaced in all browsers.

@kjellr
7 months ago

#18 @kjellr
7 months ago

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:

https://cldup.com/-70XLGB3iI-3000x3000.png

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

https://cldup.com/wn2c1lY7gF-2000x2000.png

https://cldup.com/7CGfGR29fm-1200x1200.png

Mobile

https://cldup.com/P-GIsLhW4w-3000x3000.png

https://cldup.com/scfukMGLBx-3000x3000.png

#19 @desrosj
7 months ago

#47203 was marked as a duplicate.

@desrosj
7 months ago

#20 @desrosj
7 months ago

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.

#21 @afercia
7 months ago

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
7 months ago

#22 @kjellr
7 months ago

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:

https://cldup.com/zNnAluRO6T-3000x3000.png

https://cldup.com/CmH6rwc7m8-3000x3000.png

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.

Last edited 7 months ago by kjellr (previous) (diff)

#23 @hedgefield
7 months ago

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

@desrosj
7 months ago

@desrosj
7 months ago

@kjellr
7 months ago

#24 @kjellr
7 months ago

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

#25 @desrosj
7 months ago

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?

#26 @ianbelanger
7 months ago

  • Keywords commit added

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

#27 @desrosj
7 months ago

  • Owner set to desrosj
  • Status changed from new to assigned

#28 @desrosj
7 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#29 @desrosj
7 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening to backport.

#30 @desrosj
7 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#31 @kjellr
7 months ago

Thanks, everyone!

#32 @spacedmonkey
6 months ago

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