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:

hidden-suggester.png (1×1 px, 214 KB)

Acceptance criteria:

  • Suggester no longer overlaps SpecialPage tab

Patch-For-Review:

Event Timeline

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.
Lydia_Pintscher lowered the priority of this task from High to Low.Sep 2 2018, 3:38 PM

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

in screenshots:

image.png (852×1 px, 152 KB)

if that z-index is removed

image.png (859×1 px, 152 KB)

🎉


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