WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 7 days ago

#46881 new enhancement

Site Health: improve the header elements horizontal centering

Reported by: afercia Owned by:
Milestone: 5.2.2 Priority: normal
Severity: normal Version: 5.2
Component: Administration Keywords: has-screenshots site-health has-design-feedback needs-patch
Focuses: Cc:

Description (last modified by afercia)

In the Site Health pages, the elements in the header aren't horizontally centered.

Not a blocker but visually it's slightly disturbing because the alignment looks "off".

I guess it's because of a mix of design choice and implementation details e.g.:

  • the "score counter" on the right of the main title makes the title not centered
  • the nav menu items can't be centered because of the CSS implementation

Also, while this is visible in the default language (English), it's even more evident with languages that use strings with a different length. See the attached screenshots, where the vertical red line is placed exactly in the middle of the content area.

Attachments (3)

english.png (64.2 KB) - added by afercia 6 weeks ago.
italian.png (70.8 KB) - added by afercia 6 weeks ago.
in browser editing.png (32.3 KB) - added by afercia 5 weeks ago.
nav items same width

Download all attachments as: .zip

Change History (20)

@afercia
6 weeks ago

@afercia
6 weeks ago

#1 @afercia
6 weeks ago

  • Keywords site-health added

#2 @afercia
6 weeks ago

  • Keywords needs-design-feedback added

#3 @afercia
6 weeks ago

  • Description modified (diff)

#4 @Clorith
5 weeks ago

This is not the worst thing to fix, but has other considerations to keep in mind which I suspect mostly boils down to preferences:

Right now, it's centered based on the whole top area (including the "score counter"), so the text may feel offset, but as a whole it is actually in the center.

On the other hand, if we change it, the text will appear centered, but the score will noticeably "poke out" on the side then.

#5 @xkon
5 weeks ago

As an extra note on this, the page title uses an .health-check-header h1 { margin: 1rem 0.8rem; } that pushes the title a bit towards the "right" side since the score counter doesn't have a right margin as well to balance the same "outter" spacing. Setting a margin: 1rem 0.8rem 1rem 0; to the h1 sets a more correctly "centered" alignment to the overall elements of health-check-title-section, but again it might seem "off" :)

#6 @afercia
5 weeks ago

To make the two menu items have the same width irrespectively of the length of their text, these two lines of CSS could be used on the nav element. Works nicely in modern browsers:

display: inline-grid;
grid-template-columns: 1fr 1fr;

See attached screenshot below.

@afercia
5 weeks ago

nav items same width

#7 @Clorith
3 weeks ago

  • Milestone changed from Awaiting Review to 5.2.1

I'm marking this for 5.2.1, it makes sense to tackle then as we will be evaluating the pass percentages as well at that time.

#8 @desrosj
2 weeks ago

  • Keywords close added

If #47046 removes the grading circle (which appears to be where the consensus on that ticket is heading), would this need any further action? In my testing, it seems the tabs would then be centered to the middle of the heading. If this is true, I think this can be closed out and mentioned/tackled on #47046 instead.

@afercia can you confirm?

#9 @afercia
2 weeks ago

@desrosj regardless of the grading, the tabs are not centered. Simply because their width is based on their content. I's more evident in languages other than English.

Only way I can think of to center the tabs is giving them a min-width which wouldn't work with very long translations anyways. Or use the CSS posted above.

#10 @Clorith
10 days ago

  • Keywords close removed

I just tested the CSS above, and I kinda like it, it felt more natural than variable length items. It does rely on there always being no more than 2 items, but I think that's fine, we can up the limit if there at any stage becomes a need for another entry, but I don't foresee one anytime soon.

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


10 days ago

#12 @tinkerbelly
10 days ago

The design team this briefly during a triage session today.

It sounds like the key question here is: “Should navigation tabs be of equal or variable width?”

We'll want to be certain that this is a robust pattern that can apply to other parts of the interface that may use it—for instance, Gutenberg's sidebar. With that in mind, it seems that variable width tabs are the most flexible solution, both in terms of accommodating different use cases, languages, string lengths, and zoom settings.

Unfortunately, this does mean that, in some cases, the visual display may suffer a bit. This feels like an okay trade-off for increased usability and flexibility here, rather than prioritising visual balance.

A potential workaround if this is an unacceptable visual regression could be to look into left-aligning these title headers, rather than centre-aligning them. This would, again, require testing across devices, settings, and languages to ensure we have a pattern that's reusable across different interfaces and flows.

#13 @afercia
10 days ago

Just to clarify, the proposed CSS that uses inline-grid still makes the tabs have a variable width :) Both tabs will have the width of the largest one. This also automatically centers them horizontally.

You can see this in the attached in browser editing.png there the two text strings have different width and the tabs width automatically adjust to the largest one. This is still "flexible" width and, at the same time, equal width.

#14 @karmatosed
10 days ago

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

#15 @desrosj
8 days ago

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

#16 @desrosj
8 days ago

  • Keywords needs-patch added

#17 @desrosj
7 days ago

  • Milestone changed from 5.2.1 to 5.2.2

This still needs a patch. With 5.2.1 RC today or tomorrow, let's move this to 5.2.2.

Note: See TracTickets for help on using tickets.