Emoji picker overflows the viewport on narrow screens and can't be scrolled horizontally

[ihordubas99]

What’s broken?

On narrow/mobile viewports the emoji picker (grid suggestion menu, /emoji trigger) is wider than the screen. The right-hand columns are cut off and there is no way to reach them: the menu only scrolls vertically.

What did you expect to happen?

The emoji picker should fit the available width - e.g. fewer columns on narrow viewports, and/or a maxWidth derived from availableWidth plus horizontal scrolling as a fallback - so that every emoji stays reachable.

Steps to reproduce

1. Open https://www.blocknotejs.org/examples/basic/minimal on a mobile device (or in desktop devtools with a 320px-wide viewport)
2. Type /emoji to open the emoji picker
3. The right-hand columns are outside the viewport, and the menu scrolls vertically but not horizontally

BlockNote version

0.51.3 (also reproduced on 0.54.2 / main - the relevant code is unchanged)

Environment

Mobile Chrome, Mobile Safari, Mobile Firefox

Additional context

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 💖