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 (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.Nov 18 2025, 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.Nov 25 2025, 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.Nov 25 2025, 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.Nov 25 2025, 11:01 PM

LMora-WMF removed LMora-WMF as the assignee of this task.Nov 25 2025, 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).Dec 1 2025, 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.Dec 1 2025, 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.Dec 2 2025, 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.

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

~~https://d9fc83fd11.catalyst.wmcloud.org/w/~~

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

~~https://d9fc83fd11.catalyst.wmcloud.org/w/~~

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

	F70808958: Screenshot 2025-12-01 at 6.20.22 PM.png
	Dec 1 2025, 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