Vector makes all Codex icon-only buttons bigger on mobile/tablet screens, breaking layouts
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

None

Authored By

	Catrope
	Jul 19 2023, 12:27 AM

Description

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

Go to https://en.wikipedia.beta.wmflabs.org/wiki/Special:VueTest/codex
Reduce the width of the viewport to less than 1000px
Look at the Combobox section

What happens?:
The icon-only buttons at the end of the comboboxes are too big:

The icon-only buttons in the button demo also get bigger:

What should have happened instead?:
The Comboboxes should have their normal appearance, with the button height matching the text input height. This does happen at viewport widths of 1000px and more:

Software version (skip for WMF-hosted wikis like Wikipedia):
Current master branch

Other information (browser name/version, screenshots, etc.):
This is caused by this change, which introduced a blanket rule in Vector for all icon-only buttons, even those not owned by the skin itself. It initially didn't apply to anything because of higher-specificity rules in Codex, but those rules were removed recently, allowing the Vector styles to apply.

QA Results - Beta

AC	Status	Details
1	✅	T342190#9039692

Details

	Subject	Repo	Branch	Lines +/-
	Limit button only icon resizing to Vector header button icons	mediawiki/skins/Vector	master	+6 -8

Customize query in gerrit

Related Objects

Mentioned Here: T338163: Button, other components: consider a "responsive" size

Event Timeline

Catrope created this task.Jul 19 2023, 12:27 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 19 2023, 12:27 AM

Catrope moved this task from Inbox to Following on the Design-System-Team board.Jul 19 2023, 12:27 AM

Jdrewniak added a project: Web-Team-Backlog.Jul 19 2023, 8:13 AM

The sizing is intentional and more for consistency with Minerva where touch sizes are required to be bigger. A workaround for T338163

Perhaps on short term we can limit these rules to nav and header elements.

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2); removed Web-Team-Backlog.Jul 19 2023, 3:39 PM

ovasileva triaged this task as High priority.Jul 20 2023, 1:46 PM

ovasileva set the point value for this task to 2.Jul 20 2023, 5:02 PM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.

Jdlrobson moved this task from Incoming to Technical architecture on the Desktop Improvements (Vector 2022) board.Jul 20 2023, 11:23 PM

Should be fine to scope the "responsive" icon button styles to .vector-page-titlebar and .vector-header-container

Jdlrobson claimed this task.Jul 24 2023, 5:17 PM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.

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

[mediawiki/skins/Vector@master] Limit button only icon resizing to Vector header button icons

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

gerritbot added a project: Patch-For-Review.Jul 24 2023, 5:36 PM

I ran ./pixel.js reference && ./pixel.js test -c 940974 and Pixel flagged no UI regressions so I think the above solution should work fine. Passing to @bwang for review.

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 24 2023, 8:00 PM

Change 940974 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Limit button only icon resizing to Vector header button icons

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

Maintenance_bot removed a project: Patch-For-Review.Jul 24 2023, 9:31 PM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.19; 2023-07-25).Jul 24 2023, 10:00 PM

Jdlrobson reassigned this task from bwang to Edtadros.Jul 24 2023, 11:38 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.

@Catrope FYI the change above should have made the train. Thanks for reporting!

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

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

Go to https://en.wikipedia.beta.wmflabs.org/wiki/Special:VueTest/codex
Reduce the width of the viewport to less than 1000px
Look at the Combobox section
✅ AC1: The Comboboxes should have their normal appearance, with the button height matching the text input height. This does happen at viewport widths of 1000px and more:
It would be helpful to have the size specified for the elements in question. But visually they look as expected

Screenshot 2023-07-24 at 4.49.52 PM.png (1×884 px, 124 KB)

Screenshot 2023-07-24 at 4.50.50 PM.png (1×887 px, 148 KB)

Edtadros updated the task description. (Show Details)Jul 24 2023, 11:54 PM

Edtadros assigned this task to ovasileva.Jul 25 2023, 4:55 PM

ovasileva moved this task from Ready for Signoff to QA in Production on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 28 2023, 8:35 PM

This can't be easily tested on production (https://en.wikipedia.org/wiki/Special:VueTest/codex doesn't exist) so resolving this ticket.

	F37148820: Screenshot 2023-07-24 at 4.50.50 PM.png
	Jul 24 2023, 11:53 PM

	F37148819: Screenshot 2023-07-24 at 4.49.52 PM.png
	Jul 24 2023, 11:53 PM

Vector makes all Codex icon-only buttons bigger on mobile/tablet screens, breaking layoutsClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions