Dev Toolbar blocking view from elements

[at-the-vr]

Astro Info

Astro                    v4.0.2
Node                     v20.10.0
System                   Windows (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap
                         unocss

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

Chrome

Describe the Bug

• Dev Toolbar tends to block elements behind it
• In this case its a Astro Badge behind the toolbar
• Eventually the toolbar fades away but so does the audit error behind it
• Repo to replicate, I could not visualize Dev Toolbar on stackblitz, the repo needs to be run locally for that reason
• Exemplar Photo ⤵
  

What's the expected result?

No comments

Link to Minimal Reproducible Example

https://github.com/at-the-vr/brutal

Participation

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

[JeroenReumkens]

I have a similar issue in my website. There's a sticky element at the bottom of the screen. For me it would make a lof of sense if we could configure the position of the bar.

For anyone unaware: You can disable the toolbar by running npm run astro preferences disable devToolbar

[Princesseuh]

Thank you for reporting this issue! It'd be awesome to be able to drag it around the screen, that's true.