Page MenuHomePhabricator

ULS rewrite: Quick action icons have inconsistent sizes and spacing
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Assigned To
Authored By
SomeRandomDeveloper
Jun 8 2026, 11:04 PM
Referenced Files
F90571405: image.png
Fri, Jun 26, 12:16 PM
F90570316: image.png
Fri, Jun 26, 12:16 PM
F90461815: 2026-06-25_11-06-02.webm
Thu, Jun 25, 6:08 PM
F90461723: 2026-06-25_11-03-16.png
Thu, Jun 25, 6:08 PM
F90461713: 2026-06-25_11-02-42.png
Thu, Jun 25, 6:08 PM
F90461447: 2026-06-25_10-50-47.webm
Thu, Jun 25, 6:08 PM
F90461427: 2026-06-25_10-49-43.webm
Thu, Jun 25, 6:08 PM
F90461400: 2026-06-25_10-48-46.webm
Thu, Jun 25, 6:08 PM

Description

Steps to replicate the issue (include links if applicable):

What happens?:

The icons in the menu and the labels have inconsistent sizes and spacing:

image.png (324×227 px, 21 KB)

image.png (461×247 px, 23 KB)

What should have happened instead?:

The icons should all have a similar size and the labels should be aligned properly

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Derived Requirement

Ensure the quick action menu within the ULS rewrite language selector displays all action icons with consistent visual sizing and spacing. Labels associated with each quick action must be horizontally aligned and presented consistently so that all menu items appear visually uniform and easy to scan.

Test Steps

Test Case 1: Verify quick action icons and labels are displayed with consistent sizing, spacing, and alignment

  1. Log in to Wikipedia.
  2. Enable the ULS rewrite feature in Special:Preferences > Beta Features.
  3. Navigate to an article that contains multiple available languages (e.g., Barack Obama).
  4. Open the language selector above the page content.
  5. Select the "..." quick actions menu in the bottom-right corner of the selector.
  6. Observe all quick action menu items, including their icons and labels.
  7. ✅❓❌⬜ AC1: All quick action icons are displayed with consistent visual sizing, icon-to-label spacing is uniform, labels are properly aligned, and menu items appear visually consistent throughout the menu.

QA Results - PROD

ACStatusDetails
1T428522#12056010

Event Timeline

Change #1301879 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/UniversalLanguageSelector@master] ULS rewrite: Remove padding added to entypoint anchor links

https://gerrit.wikimedia.org/r/1301879

abi_ triaged this task as Medium priority.
abi_ moved this task from Backlog to In progress on the LPL Projects (ULS rewrite) board.
abi_ set the point value for this task to 2.
abi_ moved this task from Backlog to In Progress on the LPL Essential (FY2025-26 Q3&4) board.

There is an issue with additional padding added to anchor based buttons due to the CSS rules here: https://github.com/wikimedia/design-codex/blob/d4656038d94974fb2dec7550dbe8de46490cddff/packages/codex/src/themes/mixins/public/link.less#L73

Not sure about the size of the cdxIconAdd icon though. I can't pinpoint why that's small. Maybe a Codex issue? The icon svg itself has the same size (14px * 14px) across all the 3 actions.

Change #1301879 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] ULS rewrite: Remove padding added to entypoint anchor links

https://gerrit.wikimedia.org/r/1301879

@abi_ Confirmed that the quick action menu within the ULS rewrite language selector displays all action icons with consistent visual sizing and spacing. Labels associated with each quick action must be horizontally aligned and presented consistently so that all menu items appear visually uniform and easy to scan, as seen in the videos below. This is just for the Vector skin, correct? Thanks for all your work!

Test Result - Prod

Status: ✅ PASS
Environment: PROD
OS: macOS Tahoe 26.5.1
Browser: Chrome 149, Firefox 150, Safari 26.5
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://en.wikipedia.org/wiki/Barack_Obama

Test Steps

Test Case 1: Verify quick action icons and labels are displayed with consistent sizing, spacing, and alignment

  1. Log in to Wikipedia.
  2. Enable the ULS rewrite feature in Special:Preferences > Beta Features.
  3. Navigate to an article that contains multiple available languages (e.g., Barack Obama).
  4. Open the language selector above the page content.
  5. Select the "..." quick actions menu in the bottom-right corner of the selector.
  6. Observe all quick action menu items, including their icons and labels.
  7. AC1: All quick action icons are displayed with consistent visual sizing, icon-to-label spacing is uniform, labels are properly aligned, and menu items appear visually consistent throughout the menu.
endeesar
SafariFirefox
2026-06-25_11-02-42.png (961×564 px, 184 KB)
2026-06-25_11-03-16.png (1,116×575 px, 158 KB)

Is this just for the Vector skin?

Timeless
GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
GMikesell-WMF moved this task from Need QA to Done on the LPL Essential (FY2025-26 Q3&4) board.

I cannot see the images that you posted. You probably need to adjust the visibility.