Page MenuHomePhabricator

Decrease vertical spacing between menu items (main menu, toc, page tools, personal tools)
Open, Stalled, LowPublic2 Estimated Story Points

Description

Description

After the deployment of page tools @Sj helpfully offered some design feedback (T327732). This task addresses one point from that feedback: the vertical spacing between menu items is currently larger than the line-height of the article text.

Design

image (28).png (1×1 px, 240 KB)
image (27).png (1×932 px, 222 KB)

To-do

  • Decrease vertical padding on .mw-list-item a from 6px to 4px

Event Timeline

@alexhollender_WMF could you please update this before next Monday (13th) with precise changes so there's no ambiguity?

ovasileva raised the priority of this task from Low to Medium.Mar 1 2023, 11:09 PM
ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog-Archived board.
Jdrewniak renamed this task from Decrease line-height of menus (main menu, toc, page tools, personal tools) to Decrease vertical spacing between menu items (main menu, toc, page tools, personal tools).May 9 2023, 2:06 PM
Jdrewniak updated the task description. (Show Details)

This is relatively safe, single line CSS change, but I've changed the description to note that padding between menu items is different than the line-height between lines of text.

Currently the line-height is quite tight, inheriting the browser default value of "normal". This can be seen in the following screenshot.

Screenshot 2023-05-09 at 10.10.21 AM.png (420×261 px, 29 KB)
Screenshot 2023-05-09 at 10.10.21 AM.png (420×261 px, 33 KB)

We might want to refine and standardize both these values, but I think https://phabricator.wikimedia.org/T333927#8811199 via the Zebra update does a lot of the work here.

Jdlrobson changed the task status from Open to Stalled.Feb 8 2024, 5:25 PM
Jdlrobson assigned this task to Jdrewniak.

Now Zebra is deployed is there anything left to do on this ticket?

Nothing appears to have been fixed. I just opened https://en.wikipedia.org/wiki/John_Dalton in Chrome for Mac OS, logged out, and when I inspect the "Special pages" link in the Tools sidebar on the right, I get this:

.vector-pinnable-element .mw-list-item a, .vector-dropdown-content .mw-list-item a {
    display: flex;
    align-items: center;
    padding: 6px 0;
    color: #3366cc;

Note that the padding is still 6px instead of the 4px shown in the to-do item for this ticket. The text is also still 100% of the size of the body text, which is too large, but I think that's a different ticket.

Two notes:

  1. Increased padding on the menu items means a larger click target, which is more accessible.
  2. In certain languages line breaks can appear, and if the spacing is equal to the line-height, the line break will make these appear as separate menu items.

Examples for line breaks:

Line break in Tools.png (860×993 px, 189 KB)