⚓ T338642 ULS Dropdown in Vector-2022 sticky header is cut off

ULS Dropdown in Vector-2022 sticky header is cut off
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	bwang
	Jun 9 2023, 7:40 PM

Description

Background

After applying Codex z-index to Vector, the language dropdown in the sticky header no longer appears above the sticky header, causing it to look cut off

Screenshot 2023-06-09 at 2.33.17 PM.png (746×844 px, 100 KB)

Developer notes

The sticky header z-index was increased to 200 because it should appear above other menus. The user menu dropdown menu inside the sticky header still works as normal because it is a child element of the sticky header. However, the ULS menu is not.

We need to either increase the z-index of the ULS menu, or ensure that the ULS menu is placed inside the sticky header. If we increased the z-index, we also need to make sure that this only applies to the ULS in the sticky header, as the sticky header should still cover the normal ULS dropdown.

QA Results - Beta

AC	Status	Details
1	✅	T338642#9306760

QA Results - Prod

AC	Status	Details
1	✅	T338642#9342986

Details

	Subject	Repo	Branch	Lines +/-
	Bump up z-index	mediawiki/extensions/UniversalLanguageSelector	master	+1 -1

Customize query in gerrit

Related Objects

Mentioned In: T350414: Verify 1.42.0-wmf.4 deployment
Mentioned Here: T336965: User menu in Vector 2022's Sticky Header doesnt close properly in certain cases

Event Timeline

bwang created this task.Jun 9 2023, 7:40 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 9 2023, 7:40 PM

bwang updated the task description. (Show Details)Jun 9 2023, 7:42 PM

bwang updated the task description. (Show Details)Jun 9 2023, 7:54 PM

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

Jdlrobson added a project: Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1).Jun 20 2023, 6:25 PM

Putting the ULS menu in the sticky header sounds like the best approach to me. Setting the z-index on the ULS menu to 200 doesn't work, because its position in the DOM is before the sticky header (it's all the way at the top of the <body>). It could be set to a higher value, but that wouldn't make a lot of sense in the larger scheme of z-index things, I think it would make more sense to use stacking contexts the way they're supposed to be used.

Jdlrobson updated the task description. (Show Details)Jun 22 2023, 5:02 PM

Edtadros triaged this task as Medium priority.Jun 22 2023, 5:24 PM

Edtadros set the point value for this task to 1.Jun 22 2023, 5:40 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

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

This now looks like :

Screenshot 2023-07-10 at 10.30.02 AM.png (401×700 px, 75 KB)

This doesn't look much better.

What exactly do we want to do here? Wouldn't it preferable to close the ULS dialog when the menu is opened so only one can be open at a time?

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 17 2023, 5:36 PM

In T338642#9002587, @Jdlrobson wrote:

This now looks like :

This doesn't look much better.
What exactly do we want to do here? Wouldn't it preferable to close the ULS dialog when the menu is opened so only one can be open at a time?

I believe you are talking about a separate issue, T336965 describes the issue of the user menu not closing properly, resulting in a situation where multiple menus can be open.

This task is about the ULS menu being cut off by the sticky header, it should appear above the sticky header