Page MenuHomePhabricator

Page tools have long labels in certain languages
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Before Alex left he raised this issue in Slack: The text for show/hide is sometimes extremely long and looks misplaced:

Screenshot 2023-03-14 at 1.55.26 PM.png (1×902 px, 227 KB)

https://de.wikipedia.org/wiki/Special:Version?vectorpagetools=1&useskin=vector-2022&uselang=de

Acceptance criteria

  • Move the collapse link to a new line on all pages regardless of the label length.

QA Results - Beta

ACStatusDetails
1T332085#8794737

QA Results - Prod

ACStatusDetails
1T332085#8809369

Event Timeline

Potentially high?

ovasileva lowered the priority of this task from High to Medium.Mar 16 2023, 5:30 PM

@Jdlrobson @ovasileva Two potential solutions to this issue:

A. Move link/button to new lineB. Use icon quiet button
A. New line.png (592×544 px, 22 KB)
B. Icon.png (592×544 px, 17 KB)

For option B the arrow direction would be changed depending on the menu to ensure that it points in the direction the menu will be moved.

Also, for your reference I’m exploring this as part of a broader design spike of the ToC, Tools and Main menus on T333927.

@Jdlrobson @ovasileva Two potential solutions to this issue:

A. Move link/button to new lineB. Use icon quiet button
A. New line.png (592×544 px, 22 KB)
B. Icon.png (592×544 px, 17 KB)

For option B the arrow direction would be changed depending on the menu to ensure that it points in the direction the menu will be moved.

Also, for your reference I’m exploring this as part of a broader design spike of the ToC, Tools and Main menus on T333927.

As a short-term fix, option A seems more straighforward

+1 to moving the label onto a new line. The community has been quite vocal about icons without labels.

LGoto set the point value for this task to 3.Apr 6 2023, 5:44 PM

Should be a 1 line CSS fix: text-align: left;

bwang changed the point value for this task from 3 to 1.Apr 6 2023, 5:46 PM
ovasileva lowered the priority of this task from Medium to Low.Apr 10 2023, 5:34 PM

Change 908883 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] Page tools have long labels in certain languages

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

Change 908883 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Page tools have long labels in certain languages

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Per web sync meeting, the "hide" and "move to..." text should not appear misaligned as shown on the image in the task description.

ENARDE
Screenshot 2023-04-19 at 3.46.56 PM.png (554×284 px, 56 KB)
Screenshot 2023-04-19 at 3.46.46 PM.png (782×498 px, 124 KB)
Screenshot 2023-04-19 at 3.47.03 PM.png (559×521 px, 121 KB)
Screenshot 2023-04-19 at 3.46.29 PM.png (707×625 px, 134 KB)
Screenshot 2023-04-19 at 3.57.52 PM.png (735×562 px, 97 KB)
Screenshot 2023-04-19 at 3.58.05 PM.png (694×529 px, 99 KB)
Screenshot 2023-04-19 at 3.49.26 PM.png (630×354 px, 51 KB)
Screenshot 2023-04-19 at 3.49.38 PM.png (643×306 px, 34 KB)
Screenshot 2023-04-19 at 3.50.06 PM.png (664×459 px, 86 KB)
Screenshot 2023-04-19 at 3.50.16 PM.png (596×307 px, 54 KB)
Screenshot 2023-04-19 at 3.49.57 PM.png (550×461 px, 57 KB)
Screenshot 2023-04-19 at 3.49.49 PM.png (622×487 px, 93 KB)
Screenshot 2023-04-19 at 3.51.03 PM.png (641×511 px, 91 KB)
Screenshot 2023-04-19 at 3.51.16 PM.png (618×438 px, 120 KB)
Screenshot 2023-04-19 at 3.51.10 PM.png (659×340 px, 68 KB)
Screenshot 2023-04-19 at 3.50.56 PM.png (595×532 px, 93 KB)
Screenshot 2023-04-19 at 3.50.46 PM.png (766×582 px, 131 KB)
Screenshot 2023-04-19 at 3.50.39 PM.png (684×642 px, 135 KB)
Edtadros removed ovasileva as the assignee of this task.

Test Result - Prod

Status: ✅ PASS
Environment: de, ar
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Per web sync meeting, the "hide" and "move to..." text should not appear misaligned as shown on the image in the task description.

DEAR
Screenshot 2023-04-26 at 4.18.23 PM.png (435×329 px, 25 KB)
Screenshot 2023-04-26 at 4.18.14 PM.png (530×377 px, 42 KB)
Screenshot 2023-04-26 at 4.17.57 PM.png (612×382 px, 71 KB)
Screenshot 2023-04-26 at 4.18.04 PM.png (652×480 px, 89 KB)
Screenshot 2023-04-26 at 4.17.41 PM.png (633×426 px, 70 KB)
Screenshot 2023-04-26 at 4.17.49 PM.png (673×479 px, 94 KB)
Screenshot 2023-04-26 at 4.28.09 PM.png (723×239 px, 24 KB)
Screenshot 2023-04-26 at 4.27.49 PM.png (882×309 px, 47 KB)
Screenshot 2023-04-26 at 4.27.56 PM.png (495×347 px, 32 KB)
Screenshot 2023-04-26 at 4.27.31 PM.png (529×315 px, 23 KB)
Screenshot 2023-04-26 at 4.27.40 PM.png (509×587 px, 48 KB)
Screenshot 2023-04-26 at 4.28.03 PM.png (784×352 px, 119 KB)