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

No one assigned

    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