Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#41317 closed enhancement (fixed)

Consistent submenu item spacing when count indicator is present

Reported by: pauldechov's profile pauldechov Owned by: afercia's profile afercia
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Administration Keywords: good-first-bug has-screenshots has-patch
Focuses: ui Cc:


The "awaiting-mod" count indicator looks good and doesn't affect top-level menu items, but causes inconsistent spacing with submenu items:

Possible fix:

#adminmenu .wp-submenu .awaiting-mod,
#adminmenu .wp-submenu .update-plugins {
    margin-top: 0;
    margin-bottom: -2px;

Results in consistent spacing among submenu items:

Attachments (3)

41317.patch (752 bytes) - added by JDTrower 7 years ago.
41317.diff (1.3 KB) - added by afercia 6 years ago.
41317.2.diff (2.0 KB) - added by afercia 6 years ago.

Download all attachments as: .zip

Change History (12)

#1 @SergeyBiryukov
7 years ago

  • Component changed from Menus to Administration
  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

#2 @afercia
7 years ago

  • Keywords has-screenshots added
  • Version 4.8 deleted

Yep, this is clearly visible also in the "Updates" menu sub-item. However, since the introduction of system-fonts, the actual rendering is different across platforms because the font metrics are different... also different rendering engines matter.
In the screenshot below, the counters how they appear on Windows 10, Chrome, IE11, and Edge:

Since the font is different, the sub-item count ("Updates") is better aligned, while the counts in the top-level items are slightly moved to the top. Any change here should take into account different platforms and browsers. Also, notice how the counters are not perfect circles, depending on the actual number and how much space the number takes.

7 years ago

#3 @JDTrower
7 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

Here is a patch with a first pass at adjusting the CSS for the update "awaiting-mod" indicators. I have tested it on a Windows 10 computer in the latest versions of IE11, Microsoft Edge, Opera, Firefox, and Chrome.

Below are before and after screenshots for each browser.

Chrome -

Firefox -

IE11 -

Microsoft Edge -

Opera -

This patch would need to be tested on other platforms to make sure the indicators are centered better on those platforms. Feedback is also welcome.

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

7 years ago

#5 @afercia
7 years ago

  • Milestone changed from Future Release to 4.9
  • Owner set to afercia
  • Status changed from new to assigned

Let's try this for 4.9.

#6 @afercia
7 years ago

  • Keywords needs-refresh added; needs-testing removed

Seems to me it would be better to consider the real reason why the counters vertical alignment looks different. I think it's because of the different line-height value of the parent element. The font size and line-height for the top level items are:

font-size: 14px;
line-height: 18px;

while for sub-items are:

font-size: 13px;
line-height: 1.2; <-- 15.6 pixels

To double check, I've tried to make the sub items font size and line height the same as the top level items and then the alignment looks identical:

Of course, it's not possible to change the font-size but it is possible to change the line-height and then compensate the total item height adjusting the padding. While the WordPress CSS coding standards recommend to use unit-less values for line-height, they also say "unless necessary to be defined as a specific pixel value". I'd probably try to set the same value in pixels for the top level items and sub items, then adjust as necessary.

To improve the "roundness" of the counters, I'd suggest to have a look at the red comment counts in the posts list.

6 years ago

#7 @afercia
6 years ago

  • Keywords needs-refresh removed

41317.diff uses the same line-height for the top level items and sub-items. Also:

  • removes the font weight bold for consistency with other counters
  • improves the "roundness" of the counters using the same style used for the counters in the List tables. For reference:

Screenshots with the alignments before (left) and after (right) in Chrome macOS:

Also, changes the background red from #d54e21 to #ca4a1f to make the color contrast ratio higher than the 4.5:1 required by the WCAG at level AA (note: this change is not visible in the screenshot above).

6 years ago

#8 @afercia
6 years ago

41317.2.diff adds a couple comments.

#9 @afercia
6 years ago

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

In 41362:

Administration: Admin menu: Improve vertical spacing and alignment of menu items with counters.

Props pauldechov, JDTrower.

Fixes #41317.

Note: See TracTickets for help on using tickets.