All Studio UI menus broken/empty in Dev

[mdillgen]

Describe the bug

When running in development (npm run dev) the Studio UI Menus are empty!

To Reproduce

Steps to reproduce the behavior:

1. Run dev server
2. Login to Studio
3. Click on User Menu Avatar, Filter, Create new… etc.
4. See empty menu

Reproduction repo: https://github.com/mdillgen/template-nextjs-personal-website.git

Screenshots

Which versions of Sanity are you using?

@sanity/demo                 2.0.0 (up to date)
@sanity/icons               2.11.8 (up to date)
@sanity/image-url            1.0.2 (up to date)
@sanity/preview-url-secret  1.6.13 (up to date)
@sanity/react-loader        1.9.19 (up to date)
@sanity/ui                   2.1.8 (up to date)
@sanity/vision              3.42.1 (up to date)
sanity                      3.42.1 (up to date)

What operating system are you using? Mac OS Which versions of Node.js / npm are you running?

Run npm -v && node -v in the terminal and copy-paste the result here.

10.1.0
v20.9.0

[filipjohnsen]

Having the same issue, adding these styles to my studio fixed the issue for me.

[data-ui="versionMenu"],
[data-ui="MenuButton__popover"],
[data-ui="Popover"] {
  opacity: 1 !important;
  --motion-content-opacity: 1 !important;
}