Chinese sites [Regression] Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs when 2 different languages are mixed
Closed, DeclinedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Diskdance
	Aug 15 2022, 10:55 AM

Description

It's broken, again :(

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

What happens?:
Baseline of the text of variant tab at top of the page is mispositioned.

What should have happened instead?:
It should not. Below are screenshots of that in the Legacy Vector.

Details

	Subject	Repo	Branch	Lines +/-
	Reset line height on tab elements	mediawiki/skins/Vector	master	+1 -0

Customize query in gerrit

Related Objects

Mentioned In: T343110: Variant menu's text in Vector 2022 is misaligned with other tabs when page language is set to Chinese
T312157: Link styling updates (site header links + navigational menus)
Mentioned Here: T53242: Support language variant selection at ULS
T343110: Variant menu's text in Vector 2022 is misaligned with other tabs when page language is set to Chinese

Event Timeline

Diskdance created this task.Aug 15 2022, 10:55 AM

Restricted Application added subscribers: Ericliu1912, Stang, Aklapper. · View Herald TranscriptAug 15 2022, 10:55 AM

Diskdance updated the task description. (Show Details)Aug 15 2022, 10:56 AM

Diskdance added a project: Chinese-Sites.Aug 15 2022, 10:58 AM

TheDJ renamed this task from Variant tab text in Vector 2022 is mispositioned when language is set to en to Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs.Aug 15 2022, 11:05 AM

Diskdance updated the task description. (Show Details)Aug 15 2022, 11:08 AM

These are flex items. I guess we can set align-items: flex-end on them to make them bottom align.. I'm not actually sure how you would do baseline alignment for text nested inside flex like this...

@Jdrewniak if I recall correctly we recently worked on this right?

Jdlrobson mentioned this in T312157: Link styling updates (site header links + navigational menus).Aug 15 2022, 9:41 PM

Shizhao moved this task from Backlog to Extensions/Skins on the Chinese-Sites board.Aug 16 2022, 1:59 AM

Interesting. @Jdlrobson yeah I recently made an attempt at unifying the tab & dropdown menu headings. The markup for these elements is different so I added hardcoded pixel value for padding to attempt to unify the baseline alignment.

Screen Shot 2022-08-22 at 11.32.34 AM.png (448×1 px, 232 KB)

I did not take into account mulit-script scenarios though. I guess we can hardcode the height like legacy Vector and vertically-center the text with align-items:center.

Screen Shot 2022-08-22 at 11.40.42 AM.png (462×2 px, 278 KB)

btw, I know that in Legacy Vector the top and bottom paddings on the tabs were different, but that was because of the gradient. I think we can vertically center the labels equally from both top and bottom now. (that'll affect some of the spacing between the tabs and the header though, so I'll make a patchdemo first).

Jdlrobson added a project: Web-Team-Backlog (Kanbanana-2022-23-Q1).Aug 22 2022, 4:17 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 22 2022, 5:13 PM

Jdlrobson renamed this task from Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs to [Regression] Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs.Aug 22 2022, 5:36 PM

ovasileva triaged this task as Medium priority.Aug 22 2022, 5:36 PM

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-2022-23-Q1).Aug 22 2022, 5:49 PM

Jdlrobson renamed this task from [Regression] Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs to [Regression] Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs when 2 different languages are mixed.Aug 23 2022, 4:38 PM

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.

Jdlrobson moved this task from Incoming to Language Switching on the Desktop Improvements (Vector 2022) board.Aug 24 2022, 9:44 PM

Jdlrobson moved this task from Language Switching to Search on the Desktop Improvements (Vector 2022) board.Sep 28 2022, 5:11 PM

Jdlrobson moved this task from Search to Language Switching on the Desktop Improvements (Vector 2022) board.Jun 12 2023, 5:54 PM

Jdlrobson renamed this task from [Regression] Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs when 2 different languages are mixed to Chinese sites [Regression] Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs when 2 different languages are mixed.Jun 26 2023, 5:45 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1); removed Web-Team-Backlog.

LGoto set the point value for this task to 2.Jun 29 2023, 5:43 PM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1) board.Jun 29 2023, 5:54 PM

Jdlrobson claimed this task.Jul 11 2023, 4:40 PM

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

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

[mediawiki/skins/Vector@master] Reset line height on tab elements

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

gerritbot added a project: Patch-For-Review.Jul 11 2023, 10:36 PM

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

Jdrewniak moved this task from Code Review to Design Review on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1) board.Jul 12 2023, 4:23 PM

Jdrewniak moved this task from Design Review to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1) board.

Jdlrobson removed Jdlrobson as the assignee of this task.Jul 13 2023, 4:41 PM

Mabualruz claimed this task.Jul 13 2023, 4:41 PM

Jdlrobson reassigned this task from Mabualruz to KSarabia-WMF.Jul 14 2023, 5:50 PM

Jdlrobson added a subscriber: Mabualruz.

Jdlrobson reassigned this task from KSarabia-WMF to Edtadros.Jul 14 2023, 11:36 PM

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

Jdlrobson added a subscriber: KSarabia-WMF.

Change 937187 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Reset line height on tab elements

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

Maintenance_bot removed a project: Patch-For-Review.Jul 15 2023, 12:10 AM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.18; 2023-07-18).Jul 15 2023, 1:00 AM

Test Result - Beta

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

Test Artifact(s):

QA Steps

Open https://zh.wikipedia.beta.wmflabs.org/wiki/%E9%A6%96%E9%A1%B5?uselang=en
or https://zh.wikipedia.beta.wmflabs.org/wiki/%E9%A6%96%E9%A1%B5?uselang=fr
or https://zh.wikipedia.beta.wmflabs.org/wiki/%E9%A6%96%E9%A1%B5?uselang=ru
❓ ✅ AC1: The text variant should be positioned similarly to the vector images in the description.
@Jdlrobson, the old vector images look like the text variant should be vertically centered with the full height letters in English (excluding the decenders). This looks to be top justified. Not sure if this is ok.
This is ok per web sprint meeting

Screenshot 2023-07-16 at 7.24.44 PM.png (182×648 px, 13 KB)

Edtadros moved this task from QA to QA in Production on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1) board.Jul 17 2023, 5:24 PM

As discussed in standup this is likely as good as we're going to get this for now.

@ovasileva can this be closed now?

ovasileva closed this task as Resolved.Jul 28 2023, 8:23 PM

Stang moved this task from Extensions/Skins to Closed on the Chinese-Sites board.Jul 28 2023, 8:31 PM

Diskdance mentioned this in T343110: Variant menu's text in Vector 2022 is misaligned with other tabs when page language is set to Chinese.Jul 31 2023, 8:47 AM

Declined its probably more accurate here. I just reverted the patch as it caused T343110. In short, we can't easily support mixed languages, and would prefer to invest time in T53242.

Stang unsubscribed.Aug 4 2023, 10:33 PM

	F37140951: Screenshot 2023-07-16 at 7.24.44 PM.png
	Jul 17 2023, 2:29 AM

	F35484125: Screen Shot 2022-08-22 at 11.40.42 AM.png
	Aug 22 2022, 3:52 PM

	F35484118: Screen Shot 2022-08-22 at 11.32.34 AM.png
	Aug 22 2022, 3:52 PM

Chinese sites [Regression] Baseline of the text in the Variant menu in Vector 2022 is misaligned with other tabs when 2 different languages are mixedClosed, DeclinedPublic2 Estimated Story PointsBUG REPORTActions