Page MenuHomePhabricator

[Bug] NewLexeme suggester menu appears behind special page tab
Closed, ResolvedPublic

Description

Problem:
When the suggester for the language field is opened on Special:NewLexeme parts of the suggester are behind the SpecialPage tab at the top of the screen.

Screenshots/mockups:

Acceptance criteria:

  • Suggester no longer overlaps SpecialPage tab

Patch-For-Review:

Details

Related Gerrit Patches:
mediawiki/extensions/WikibaseLexeme : masterUse default overlay for item selector widget
mediawiki/extensions/Wikibase : masterAdjust wikibase-wdio for Lexeme change
mediawiki/extensions/WikibaseLexeme : masterUse specialised function in browser test
mediawiki/extensions/Wikibase : masterAdd method to be used for multi selects

Event Timeline

KaMan created this task.Jul 12 2018, 7:24 AM
Lea_Lacroix_WMDE renamed this task from NewLexeme suggester is behind special page tab to [Bug] NewLexeme suggester menu appears behind special page tab.Jul 12 2018, 7:36 AM
Lea_Lacroix_WMDE removed Lea_Lacroix_WMDE as the assignee of this task.

this happens in other languages too.

Greta_Doci_WMDE triaged this task as Medium priority.Jul 21 2018, 11:06 AM
Lydia_Pintscher lowered the priority of this task from High to Low.Sep 2 2018, 3:38 PM
alaa_wmde added a subscriber: alaa_wmde.EditedApr 16 2019, 9:14 PM

This is happenning due to z-index being set to 0 on an ancestor html element div.mw-body-content.

in screenshots:

if that z-index is removed


🎉


question is why that z-index was set to 0. If we cannot remove it, I'm afraid the only solution is to change OOUI widget used here so that it moves the popup element as a direct child of body (usual solution for in popup libraries to avoid this problem) which is not a small thing and not in our scope.

So our options:

  • cheapest, not sure if possible yet remove z-index on ancestor element div.mw-body-content
  • very expensive, should be possible change OOUI widget so that it uses the proper solution for this know html limitation with z-index

Let's try the first and investigate/get-feedbcak on it first?

The z-index: 0 has been deliberately done in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/178086 to mitigate a security issue: T40848

Other special pages which would face the same problem, e.g. https://de.wikipedia.org/wiki/Spezial:Aktive_Benutzer, seemed to have solved this issue by using a different OOUI widget that already implements the suggested behavior.

In principle, the option to move the popup into an extra overlay already exists: https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays
The challenge is now to find where to set this option.

Change 504569 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/WikibaseLexeme@master] Use default overlay for language selector widget

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

Change 504626 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] Adjust wikibase-wdio for Lexeme change

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

Change 505698 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] Add method to be used for multi selects

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

Change 505700 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/WikibaseLexeme@master] Use specialised function in browser test

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

Change 505698 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Add method to be used for multi selects

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

Change 505700 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] Use specialised function in browser test

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

Change 504626 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Adjust wikibase-wdio for Lexeme change

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

Change 504569 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] Use default overlay for item selector widget

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