Skip to content

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

@RichardMisiak

Description

@RichardMisiak

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

Image

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 💖

Metadata

Metadata

Assignees

Labels

bug:P3Medium: Noticeable but non-blocking issues.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions