Minerva icon spacing issue - Watch and View Source
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	aude
	Aug 6 2025, 11:28 PM

Description

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

I am on an iPad and viewing https://en.wikipedia.org/wiki/Constans_II_(son_of_Constantine_III)

What happens?:

There is a large gap between the lock icon and the associated "View Source" text, resulting it the icon instead being immediately next to "Watch". Then there is a large gap between "Watch" and the watchlist star.
The icons are not flushed correctly and are not aligned with the article content.

Screenshot 2025-08-06 at 7.26.37 PM.png (850×2 px, 1 MB)

What should have happened instead?:

The lock icon should be next to "View Source" and the watchlist star should be closer to the "Watch" text.

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

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

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	styles: Fix PageActions icon spacing issue on tablet/desktop	mediawiki/skins/MinervaNeue	master	+31 -3

Customize query in gerrit

Related Objects

Mentioned In: T401359: Remove outdated Codex button and Vector icon margin-right gap addition in Vector, MobileFrontend and MinervaNeue
Mentioned Here: T403816: Personal settings dropdown button has lost horizontal padding

Event Timeline

aude created this task.Aug 6 2025, 11:28 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 6 2025, 11:28 PM

SToyofuku-WMF subscribed.Aug 11 2025, 8:26 PM

...or more commonly Watch and Edit (and Download PDF):

There is another probably related bug in advanced mode where the icons go beyond the edge of the center column:

It looks like some padding was removed from the large codex buttons, probably upstream. Here is how it looked before the regression:
https://patchdemo.wmcloud.org/wikis/be7e72f4e3/w/index.php?title=New_York_City&mobileaction=toggle_view_mobile

The reason for this issue in case was https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1177485/3/resources/skins.minerva.styles/buttons.less.
The selector was originally added with a mobile-only use case, where the labels are invisible and it's icon-only buttons, hence the line
<ul id="p-views" class="page-actions-menu__list minerva-icon-only-menu"> in 'PageActionsMenu.mustache'
negating the differences on tablet plus.

Issue is, on anything above 1120px the icon-only labels are set visible again by not applying invisible hack to the label

@media (max-width: calc(1119px)) {
  .cdx-button.cdx-button--icon-only span + span:last-child

The right approach would be to change the CSS class accordingly or, less bullet-proof, apply margin-end differently.

Volker_E mentioned this in T401359: Remove outdated Codex button and Vector icon margin-right gap addition in Vector, MobileFrontend and MinervaNeue.Aug 18 2025, 8:45 AM

Jdlrobson-WMF added a project: Reader Experience Team.Aug 18 2025, 5:04 PM

Jdlrobson-WMF triaged this task as High priority.Aug 26 2025, 4:48 PM

Jdlrobson-WMF moved this task from Incoming to Needs refinement on the Reader Experience Team board.

Change #1184175 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Fixes Minerva icon spacing issue on tablet/desktop

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

gerritbot added a project: Patch-For-Review.Sep 2 2025, 10:54 PM

You can see the old behaviour here:
https://web.archive.org/web/20250728073353/https://en.m.wikipedia.org/wiki/Barack_Obama

Test wiki created on Patch demo by ESanders (WMF) using patch(es) linked to this task:
https://d9fc83fd11.catalyst.wmcloud.org/wiki/Main_Page?mobileaction=toggle_view_mobile

Jdlrobson-WMF updated the task description. (Show Details)Sep 3 2025, 4:18 PM

Jdlrobson-WMF set the point value for this task to 2.Sep 3 2025, 5:48 PM

Jdlrobson-WMF moved this task from Needs refinement to Ready for sprint on the Reader Experience Team board.

T403816 may be related (codex button padding issues)

Jdlrobson-WMF added a project: Readers Essential Work 2025 (Codex).Oct 14 2025, 6:47 PM

Change #1184175 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] styles: Fix PageActions icon spacing issue on tablet/desktop

Reason:

Not working on this.

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

Maintenance_bot removed a project: Patch-For-Review.Oct 24 2025, 10:30 PM

bwang moved this task from Ready for sprint to REx Sprint 10 [Q2 Nov 18 - Dec 1] on the Reader Experience Team board.Tue, Nov 18, 6:27 PM

bwang edited projects, added Reader Experience Team (REx Sprint 10 [Q2 Nov 18 - Dec 1]); removed Reader Experience Team.

LMora-WMF claimed this task.Tue, Nov 25, 4:17 PM

LMora-WMF moved this task from Ready to In progress on the Reader Experience Team (REx Sprint 10 [Q2 Nov 18 - Dec 1]) board.Tue, Nov 25, 9:38 PM

I spoke with @Sneha about the horizontal padding and she advised to leave as is since this is on Minerva and thus mostly touch screens where hover and focus states aren't as used/important. So the original patch LGTM, I'm going to restore it and move to code review.

Change #1184175 restored by LorenMora:

[mediawiki/skins/MinervaNeue@master] styles: Fix PageActions icon spacing issue on tablet/desktop

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

gerritbot added a project: Patch-For-Review.Tue, Nov 25, 11:01 PM

LMora-WMF removed LMora-WMF as the assignee of this task.Tue, Nov 25, 11:33 PM

LMora-WMF moved this task from In progress to Needs code review on the Reader Experience Team (REx Sprint 10 [Q2 Nov 18 - Dec 1]) board.

LMora-WMF subscribed.

Change #1184175 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] styles: Fix PageActions icon spacing issue on tablet/desktop

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

ReleaseTaggerBot added a project: MW-1.46-notes (1.46.0-wmf.5; 2025-12-02).Mon, Dec 1, 6:00 PM

LMora-WMF moved this task from Needs code review to Needs QA on the Reader Experience Team (REx Sprint 10 [Q2 Nov 18 - Dec 1]) board.Mon, Dec 1, 6:07 PM

Checked in betalabs for the following cases
(1) Desktop + MinervaNeue skin
(2) Desktop + MinervaNeue skin (responsive mode disabled)
(3) Mobile + Advanced mode disabled
(4) Mobile + Advanced mode enabled

betalabs - Desktop+MinervaNeue	`wmf.4` (for comparison) Desktop+MinervaNeue

No issues found; will also check after wmf.5 deployment.

Volker_E claimed this task.Tue, Dec 2, 6:19 PM

The icons flush not perfectly scalpel cut, but are harmoniously intended on mobile and don't feature the description issues any longer.

	F70808960: Screenshot 2025-12-01 at 6.20.33 PM.png
	Mon, Dec 1, 11:27 PM

	F70808958: Screenshot 2025-12-01 at 6.20.22 PM.png
	Mon, Dec 1, 11:27 PM

	F65720308: Screenshot 2025-08-06 at 7.26.37 PM.png
	Aug 6 2025, 11:28 PM

	F65952522: image.png
	Sep 3 2025, 11:46 AM

	F65751310: image.png
	Aug 14 2025, 4:16 PM

	F65751272: image.png
	Aug 14 2025, 4:01 PM

Minerva icon spacing issue - Watch and View SourceClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions

Description

Details

Related Objects

Event Timeline

Minerva icon spacing issue - Watch and View Source
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions