Gutenberg: UX: tip dot overlays menu flyout

[drawcard]

Describe the bug
The tip dot z-index is too high and overlaps menu item flyout

To Reproduce
Nil

Expected behavior
The tip dot should sit below the menu item flyout

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.0
• Browser: Chrome 70.0.3538.77

Relevant code: https://github.com/WordPress/gutenberg/blob/25bc46a9135cbeb805fefa3325382d01ce4bd938/assets/stylesheets/_z-index.scss#L91-L92

[designsimply]

I am not sure what the expected behavior is for this. Is it okay to have the tip above a menu item since it is dismissible?

[drawcard]

To me I find it a bit confusing, I would expect that all tips (including the dot and dialog box) sit below any critical UI rather than above it.

In fact I discovered this randomly by firing up a new post in a fresh install of WP5, and then making a decision to do something elsewhere in WP - wherein I noticed the flyout was obscured by the dot / dialog box. It felt a bit broken / unpolished to me, and not what I expected.

[designsimply]

Thanks for posting a specific use case. Always helpful to have that. It would be cool to get some additional input so I’ll leave this open for feedback for now.

[melchoyce]

Yeah, weird z-index issue. I agree that the navigation menus should be higher than the tips — the tips are part of the page, and the page appears underneath the menu. Having the tips appear over the menu makes for a weird sandwich.

[drawcard]

Yep I think dropping the tip's z-index down 1 unit below the menu system would do the trick.

I also wonder if other menu overlays are affected (eg 3rd party plugin menu dropdowns potentially placed in the top admin bar). This was just a blank WP5 setup I was testing out.

[Naerriel]

Z-index goes currently like this:
admin menu < admin bar < nux dot tip

We want to keep admin menu below admin bar, because admin bar's submenus should be on top of menu:

Also we want to keep admin bar's z-index below nux dot tip, because it's often placed on admin bar:

With those dependencies it seems impossible to achieve:
admin menu > nux dot tip,
nux dot tip > admin bar,
admin bar > admin menu,
but maybe there is a workaround.

What do you think about that?

[mapk]

When changing .components-popover:not(.is-mobile).is-bottom from z-index: 99990 to z-index: 100 it seems to work just fine. However there's now a problem with the "Content Structure" toolbar popover. It normally extends further over the wp-admin navigation, so in this case part of it gets lost.

If we make this change, we'd also need to update that popover to position within Gutenberg only.

Example at z-index: 100

[mapk]

I'm closing this due to the new tip explorations here: https://github.com/WordPress/gutenberg/issues/16592

Tips are being completely redesigned and these popovers will become obsolete.