Top-layer elements like Dialog can cover the dev toolbar.

[liruifengv]

Astro Info

Astro                    v4.0.8
Node                     v20.8.0
System                   macOS (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/starlight
                         @astrojs/sitemap
                         astro-expressive-code
                         @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

Description

Top-layer elements like Dialog can cover the dev toolbar.

Take Astro docs as an example， the feedback dialog covers the dev toolbar.

Because dialog is a top layer， popover may also have the same behavior

What's the expected result?

The dev toolbar should be on the top layer.

Link to Minimal Reproducible Example

https://docs.astro.build/en/install/auto/

Participation

• [ ] I am willing to submit a pull request for this issue.

[Princesseuh]

Not sure what we can do about this, it's not possible to put elements in the top layer, it's entirely managed by the browser.

I guess we could put the dev overlay in a dialog, but I'm not sure how that would work accessibility wise and stuff

[liruifengv]

For multiple top layers, the one that appears later seems to be on top of the one that appears first.

[delucis]

Sharing a helpful comment from @mayank99 that might help here!

found the answer today while experimenting with popovers. essentially, you need popover="manual" on your toolbar for it to be unaffected by other popovers

see this multiple popovers example https://mdn.github.io/dom-examples/popover-api/multiple-manual/ from https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#using_manual_popover_state

(Copied the full post with Mayank’s permission.)