Page MenuHomePhabricator

Page action buttons width 2px off on mobile vs. tablet
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

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

  • In Minerva, view the page action buttons on a mobile viewport (below 640px)
  • View them again at a tablet viewport (640px or above)

What happens?:

  • Below 640px, the large icon-only buttons are 44px wide. This is the correct width from Codex.
  • At or above 640px, the buttons are 46px wide. This is due to a padding of @spacing-75 being set on them to fix a bug (T401361). That padding value doesn't account for the button border, so it adds a pixel on each side.

This is causing issues with the pulsating dot we're adding to the "save" button as part of T422163, where the dot is meant to be centered above the icon. We can fix that with CSS, but regardless, the 2px different could cause other issues in the future.

Screenshot 2026-04-30 at 5.21.34 PM.png (1,354×936 px, 97 KB)

Screenshot 2026-04-30 at 5.21.43 PM.png (1,350×942 px, 87 KB)

What should have happened instead?:

The icon-only buttons should be the same size regardless of viewport.

To achieve this, we need to change the padding value in pageactions.less from 0 @spacing-75 to 0 calc( @spacing-75 - @border-width-base ):

.page-actions-menu__list-item {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-width: 0;

	.cdx-button {
		color: @color-subtle !important;
		font-weight: 500;

		@media all and ( min-width: @min-width-breakpoint-tablet ) {
			// TODO: Change this.
			padding: 0 @spacing-75;
		}
	}
}

Details

Event Timeline

Change #1280768 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/skins/MinervaNeue@master] Adjust padding of page actions buttons

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

Volker_E renamed this task from Page action buttons 2px off on mobile vs. tablet to Page action buttons width 2px off on mobile vs. tablet.Apr 30 2026, 11:11 PM

Change #1280768 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Adjust padding of page actions buttons

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

Can this be given a priority? Does it need an estimate?

Jdlrobson-WMF reassigned this task from Jdlrobson-WMF to AnneT.