Page MenuHomePhabricator

Default Reference Tooltips gadget and new Vector search can overlap because of z-index
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

image.png (378×683 px, 65 KB)

Event Timeline

Is there a particular screen resolution/browser width/browser and OS that's at? I can't get that page to overlap because the JavaScript does a decent job sensing and ensuring the box flows down, not up.

The whole header has a z-index: 200; I do think it's curious that only the search has an issue here and not the whole bar. Another way to fix this in some way would be to adjust the bar down to some other value from 200, as z-index is not particularly abused on wikis (it's kind of like !important in some regards in the pain you can induce by setting an explicit z-index). I do see a few values onwiki that are higher than they should be....

Changing the CSS in the gadget would be a (temporary?) acceptable fix.

Well, the whole bar is the issue, but the rest of it is just preventing the text from being selected etc. My resolution is 1536 × 864.

Jdlrobson subscribed.

We've been standardizing z-index values (see https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html). I would assume this popup should be using z-index-tooltip. Ideally we'd have CSS variables for this that can be used by gadgets as an API. Adding design systems team in case this is something that they could think about.

Thanks for updating the gadget @Izno, that seems to have fixed it for me.

@Jdlrobson are skin variables not accessible to gadgets? Codex design tokens were recently made available through them. I guess not because they are less variables and only pure CSS is supported in gadgets?

JFYI: this gadget is used in a number of wikis (https://www.mediawiki.org/wiki/Reference_Tooltips), so every single one needs to be updated with some desired value if we go that route.

@Jdlrobson are skin variables not accessible to gadgets? Codex design tokens were recently made available through them. I guess not because they are less variables and only pure CSS is supported in gadgets?

They are not because LESS is not supported. There's related chatter in T313945: [EPIC] Enable gadget and user-script developers to use Vue and Codex and children, I think particularly T340477: Support Codex design tokens in Gadgets is intended to think about it.

Not sure where to look for the current z-index value, but if it's still higher than tooltip’s, this also needs to be fixed in other wikis:
https://global-search.toolforge.org/?q="rt-tooltip"&namespaces=2%2C4%2C8&title=(Gadgets-definition|.*\.(css))

The new z-index is 3, so no changes to gadgets should be needed now.