Page MenuHomePhabricator

page preview partially covered by search bar
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):
go to https://en.wikipedia.org/wiki/Independence_Day_(United_States) and hover over the link carnivals, or any other link in that same line, and the page preview (in enabled) will float above the link and be covered by a part of the searchbar

What happens?:
the page preview (in enabled) will float above the link and be covered by a part of the searchbar

What should have happened instead?:
z-level of page preview should be above z-level of searchbar

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

Other information (browser name/version, screenshots, etc.):
page dimensions (window.innerWidth, window.innerHeight): 1477, 784

Screenshot from 2023-06-29 09-59-37.png (982×1 px, 944 KB)

QA Results - Beta

ACStatusDetails
1T340747#9007522

QA Results - Prod

ACStatusDetails
1T340747#9020555

Event Timeline

Winstondegreef renamed this task from page preview partially covered by search bas to page preview partially covered by search bar.Jun 29 2023, 2:24 PM
  • @zIndexPopup is set to 110
  • Element containing the search bar has a z-index of 200 on Vector-2022 at ~that resolution

Increasing the z-index of the popup to 210 seems reasonable. Noting this comment which requests

// Per https://www.mediawiki.org/wiki/Page_Previews/Design_specifications
// DO NOT CHANGE without consulting a designer.

and the fact this really only seems to affect Desktop Improvements (Vector 2022), adding @Jdlrobson for comments.

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

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

[mediawiki/extensions/Popups@master] page preview partially covered by search bar

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

Change 936078 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Avoid setting large z-index on headers

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

bwang added a subscriber: Mabualruz.

Change 935134 abandoned by Jdlrobson:

[mediawiki/extensions/Popups@master] Page preview partially covered by search bar

Reason:

We're going to go ahead with https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/936078 instead. Thanks for the attempt at fixing this!

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

Change 936078 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Avoid setting large z-index on headers

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

go to https://en.wikipedia.org/wiki/Independence_Day_(United_States) and hover over the link carnivals, or any other link in that same line, and the page preview (in enabled) will float above the link and be covered by a part of the searchbar
✅ AC1: z-level of page preview should be above z-level of searchbar

Screenshot 2023-07-11 at 7.15.54 PM.png (433×1 px, 253 KB)

Edtadros removed Edtadros as the assignee of this task.

Test Result - Prod

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

Test Artifact(s):

QA Steps

go to https://en.wikipedia.org/wiki/Independence_Day_(United_States) and hover over the link carnivals, or any other link in that same line, and the page preview (in enabled) will float above the link and be covered by a part of the searchbar
✅ AC1: z-level of page preview should be above z-level of searchbar

Screenshot 2023-07-17 at 9.29.11 AM.png (481×1 px, 483 KB)