#right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Bebiezaza
	May 25 2022, 4:00 PM

Description

List of steps to reproduce (step by step, including full links if applicable):

Enable Vector 2022 skin when logged in
Visit any English Wikipedia page in Safari desktop < 15. You may need to use browserstack if you have the latest Safari installed. Safari 13 ideally would be the one to test in.

What happens?:
The order and placement of Article, Talk, and Read menu bar items on a content page are jumbled.

What should have happened instead?:

Screen Shot 2022-06-28 at 11.59.26 AM.png (2×3 px, 1 MB)

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

Noted in the following browsers:

Safari 13.1, 14.1

Samsung Internet 12.1.4.3	Safari iPadOS 14.8.1

Notes

No issues in Safari 15.5

QA Results - Beta

AC	Status	Details
1	✅	T309223#8110715

QA Results - Prod

AC	Status	Details
1	✅	T309223#8118102

Details

	Subject	Repo	Branch	Lines +/-
	Refactor Vector tabs layout for reduced size & complexity	mediawiki/skins/Vector	master	+57 -100
	Refactor Vector tabs layout for reduced size & complexity	mediawiki/skins/Vector	master	+55 -99

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		Jdrewniak	T303484 Introduce basic grid system to modern Vector
		Resolved	BUG REPORT	ovasileva	T309223 #right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022

Event Timeline

Bebiezaza created this task.May 25 2022, 4:00 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 25 2022, 4:00 PM

Bebiezaza updated the task description. (Show Details)May 25 2022, 4:00 PM

Bebiezaza renamed this task from right-navigation tab placed next to left-navigation on mobile browsers browsing as desktop in vector-2022 to #right-navigation Tab Moves to The Left, Next to #left-navigation, on Some Mobile Browsers Browsing as Desktop in Vector-2022.May 27 2022, 9:31 AM

Jdlrobson mentioned this in T306910: Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens)).May 27 2022, 4:33 PM

This bug also happens in IE11

Jdlrobson added a parent task: T303484: Introduce basic grid system to modern Vector.Jun 6 2022, 9:17 PM

Jdlrobson moved this task from Incoming to Layout on the Desktop Improvements (Vector 2022) board.

Discussed on enwiki village pump: https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1094246818#TalkRead. Appears it's due to an unsupported value for justify-content

I can produce something like this description if I have just the right (or wrong?) combination of font and screen sizes in Chrome on macOS. It looks a little weirder with a different tab selected, e.g., when the editing window is open.) I think I could manage this on old Vector as well, but I don't have a screenshot of that.

Screen Shot 2022-06-22 at 6.22.53 PM.png (756×1 px, 180 KB)

I'm seeing this in browsers using older Chrome versions in Linux too.

From the main page of fr.wikipedia.org, eu.wikipedia.org and mediawiki.org in one that's using 91:

Jdlrobson renamed this task from #right-navigation Tab Moves to The Left, Next to #left-navigation, on Some Mobile Browsers Browsing as Desktop in Vector-2022 to #right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022.Jun 30 2022, 3:28 PM

Jdlrobson triaged this task as High priority.

Jdlrobson added a project: Web-Team-Backlog (Kanbanana-2022-23-Q1).

Jdlrobson updated the task description. (Show Details)

Jdlrobson merged a task: T311545: Title bar misaligned in Safari 13.1, 14.1 with Vector 2022 skin .

Jdlrobson added a subscriber: stevenwalling.

Jdlrobson moved this task from Kanbanana-2022-23-Q1 to Kanbanana-FY-2021-22 on the Web-Team-Backlog board.Jun 30 2022, 4:03 PM

Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Kanbanana-2022-23-Q1).

LGoto assigned this task to Jdrewniak.Jun 30 2022, 5:29 PM

Change 810968 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Refactor Vector tabs layout for reduced size & complexity

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

gerritbot added a project: Patch-For-Review.Jul 4 2022, 6:28 PM

LGoto edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q1); removed Web-Team-Backlog (Kanbanana-FY-2021-22).Jul 5 2022, 5:44 PM

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

Jdrewniak removed Jdrewniak as the assignee of this task.Jul 6 2022, 4:38 PM

Jdrewniak moved this task from Upcoming to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Jdrewniak subscribed.

I fast-tracked this task from need-analysis to code review, since some of the work I had in-progress for T308344 solves this issue as well.

Jdlrobson claimed this task.Jul 6 2022, 4:42 PM

ovasileva subscribed.Jul 11 2022, 1:56 PM

Jdlrobson merged a task: T313098: Article toolbar shrinks on iPhone.Jul 15 2022, 12:35 AM

Jdlrobson added a subscriber: Iniquity.

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Jul 18 2022, 10:43 PM

Jdlrobson updated the task description. (Show Details)

Change 810968 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Refactor Vector tabs layout for reduced size & complexity

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

Jdlrobson mentioned this in T313098: Article toolbar shrinks on iPhone.Jul 18 2022, 11:29 PM

Maintenance_bot removed a project: Patch-For-Review.Jul 18 2022, 11:30 PM

Change 815323 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Refactor Vector tabs layout for reduced size & complexity

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

gerritbot added a project: Patch-For-Review.Jul 19 2022, 4:17 PM

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Jul 19 2022, 5:03 PM

Jdlrobson subscribed.

Change 815323 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Refactor Vector tabs layout for reduced size & complexity

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

Maintenance_bot removed a project: Patch-For-Review.Jul 19 2022, 6:29 PM

Jdlrobson mentioned this in T313562: Design review the visual enhancement and layout changes.Jul 21 2022, 10:54 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Catalina
Browser: Safari 13.1
Device: MBP
Emulated Device: used browserstack

Test Artifact(s):

QA Steps

Enable Vector 2022 skin when logged in
Visit any English Wikipedia page in Safari desktop < 15. You may need to use browserstack if you have the latest Safari installed. Safari 13 ideally would be the one to test in.
✅ AC1: The order and placement of Article, Talk, and Read menu bar items on a content page are not jumbled.

Screen Shot 2022-07-27 at 6.43.20 PM.png (386×1 px, 183 KB)

Seems to be fixed in Samsung Internet 12.1.4.3

and Safari iPadOS 14.8.1

meanwhile IE11 seems to be a little bit weird, but it looks to be fixed for this task

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Catalina
Browser: Safari 13.1
Device: MBP
Emulated Device: used browserstack

Test Artifact(s):

QA Steps

Screen Shot 2022-07-31 at 1.26.52 PM.png (373×1 px, 216 KB)

Edtadros updated the task description. (Show Details)Jul 31 2022, 8:29 PM

Looks good, resolving

	F35371541: Screen Shot 2022-07-31 at 1.26.52 PM.png
	Jul 31 2022, 8:27 PM

	F35349700: Screen Shot 2022-07-27 at 6.43.20 PM.png
	Jul 28 2022, 1:44 AM

	F35284886: Screen Shot 2022-06-28 at 11.59.26 AM.png
	Jun 30 2022, 3:29 PM
	File Not Attached

	F35356944: image.png
	Jul 29 2022, 4:48 PM

	F35356930: S__9207810.jpg
	Jul 29 2022, 4:48 PM

	F35356928: 223370.jpg
	Jul 29 2022, 4:48 PM

	F35268781: mediawiki.png
	Jun 23 2022, 6:33 PM

#right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022Closed, ResolvedPublicBUG REPORTActions

Description

Notes

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

#right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022
Closed, ResolvedPublicBUG REPORT
Actions

Related Objects
Search...