Drag handle menu is clipped when using shadcn with position relative #2544

What’s broken?

When you render the shadcn editor with

.bn-container {
  position: relative;
}

to prevent floating elements escaping their parent, the drag handle menu often renders in an incorrect position and gets clipped by the side of the container

This can be seen in the shadcn example in the documentation
https://www.blocknotejs.org/examples/basic/shadcn

What did you expect to happen?

The drag handle menu is not clipped

Steps to reproduce

1. Go to https://www.blocknotejs.org/examples/basic/shadcn
2. Click on the drag handle button in the example to trigger the menu
3. Observe that the drag handle menu is clipped

BlockNote version

latest

Environment

chrome latest, safari latest, mac OS tahoe

Additional context

No response

Contribution

• I'd be interested in contributing a fix for this issue

Sponsor

• I'm a sponsor and would appreciate if you could look into this sooner than later 💖