Page MenuHomePhabricator

Personal settings dropdown button has lost horizontal padding
Open, LowPublic

Assigned To
None
Authored By
Esanders
Sep 5 2025, 12:30 PM
Referenced Files
F88625028: image.png
Jun 15 2026, 11:09 AM
F65964227: image.png
Sep 5 2025, 12:40 PM
F65964203: image.png
Sep 5 2025, 12:40 PM
F65964156: image.png
Sep 5 2025, 12:40 PM
F65964148: image.png
Sep 5 2025, 12:40 PM
F65964138: image.png
Sep 5 2025, 12:30 PM
F65964140: image.png
Sep 5 2025, 12:30 PM
F65964134: image.png
Sep 5 2025, 12:30 PM

Description

Looking at a patchdemo from June, the button had the same horizontal padding (visible on hover or focus) as the plain buttons adjacent (5px):

image.png (308×68 px, 3 KB)

It now has none:

image.png (308×68 px, 3 KB)

with normal styling:

Before regressionAfter regression
image.png (250×76 px, 3 KB)
image.png (250×76 px, 2 KB)

Event Timeline

Relatedly (but maybe not a regression) the spacing between the icon the dropdown arrow seems excessive

VectorOOUI toolbar
image.png (58×40 px, 695 B)
image.png (57×41 px, 706 B)
Spacing14px8px

Codex doesn't have generic indicator support, but the closest equivalents also use about 8px spacing

AccordionChips
image.png (200×58 px, 4 KB)
image.png (165×55 px, 2 KB)
HFan-WMF moved this task from Incoming to Backlog on the Reader Experience Team board.

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly point to the codebase URL and provide clear steps to help a contributor get set up for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

@Sneha could you please validate what the expected spacing should be for these buttons? (this was a regression)

Change #1187938 had a related patch set uploaded (by Rehan_khan_78; author: Rehan_khan_78):

[mediawiki/core@master] Fix button padding in wikimedia-ui-base.less

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

@Rehan_khan_78 Hi, could you please attach a before-your-patch and an after-your-patch screenshot which shows the padding difference of that dropdown? Thanks.

Change #1187938 had a related patch set uploaded (by Rehan_khan_78; author: Rehan_khan_78):

[mediawiki/core@master] Fix button padding in wikimedia-ui-base.less

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

Change #1187938 had a related patch set uploaded (by Rehan_khan_78; author: Rehan_khan_78):

[mediawiki/core@master] Fix button padding in wikimedia-ui-base.less

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

Change #1187938 abandoned by Jdlrobson:

[mediawiki/core@master] Fix button padding in wikimedia-ui-base.less

Reason:

Please submit a patch against the appropriate codebase.

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

FYI, this also affects the Page's Tools dropdown menu.

FYI, this also affects the Page's Tools dropdown menu.

I think those buttons are sufficiently different that they should be considered separately. The other page tabs don't have much horiztonal padding either.

Change #1212146 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Fix padding on user menu button

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

Change #1226264 had a related patch set uploaded (by Rehan_khan_78; author: Rehan_khan_78):

[mediawiki/skins/Vector@master] Fix horizontal padding on Personal settings dropdown button

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

Change #1226264 had a related patch set uploaded (by Rehan_khan_78; author: Rehan_khan_78):

[mediawiki/skins/Vector@master] Fix horizontal padding on Personal settings dropdown button

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

Change #1226264 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Fix horizontal padding on "Personal tools" dropdown button

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

Hello! I would like to work on this task as my first contribution. Is it still available?

Pppery added a subscriber: Rehan_khan_78.

Change #1212146 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Fix padding on user menu button

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

I am not sure if this is regression. We talked about reducing padding around user menu because that padding was making the header visually appear as if it had inconsistent spacing between all the icons. I am not sure if that change actually went through or if it is regression. But if it was implemented then this was intentional.

The user menu is currently closer to the next icon that than others:

image.png (233×53 px, 4 KB)

If we want to adjust the spacing between icons for perceived spacing that should be done with margin tweaks, not removing the padding.

Yes perceived spacing is what we are aiming for. We can do it whichever way is most optimal... I am looping in @aude and @Volker_E