Array of References Pop-over: tiny max-width

[Ojay]

Describe the bug

When adding a reference to an array of references the Popover has a max-width that is pretty tight and the absolute positioning is out. This results in you seeing a list of icons and the Popover displaying in an odd place.

When you click out and re-open the dialog it tends to display correctly, so this appears to only be occurring on the initial activation of the Popover.

To Reproduce

Steps to reproduce the behavior:

1. Go to an array of references
2. Click to add a reference
3. Popover should display incorrectly

Expected behavior

An appropriately sized Popover

Which versions of Sanity are you using?

@sanity/dashboard 3.1.5 (up to date)
@sanity/eslint-config-studio 3.0.1 (up to date)
@sanity/ui 1.8.2 (up to date)
@sanity/vision 3.16.7 (up to date)
sanity 3.16.7 (up to dat

What operating system are you using?

Mac OS Big Sur 11.6.4

Which versions of Node.js / npm are you running?

9.5.0
v18.14.2

Additional context

Add any other context about the problem here.

[bybyers]

This started happening to me too. It looks like the div for data-ui="MenuButton__popover" got set to max-width of ~36 pixels.

[bjoerge]

Thanks for reporting! This was fixed by #4963 which was relased in v3.17.0 yesterday

[bybyers]

Im still getting it with v3.17.0 with Nextjs with latest dependencies.

[bybyers]

A quick fix for anyone having this issue is to add this CSS class to their studio

[data-ui="MenuButton__popover"] {
  max-width: 681px !important;
}

[github-actions]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.