fix: Slash menu item overflow (BLO-1192) by matthewlipski · Pull Request #2909 · TypeCellOS/BlockNote

matthewlipski · 2026-07-22T15:41:56Z

Summary

This PR adjusts the Mantine slash menu styling to prevent overflow for items with long titles or descriptions.

Closes #2744

Rationale

Item descriptions (especially custom ones) can get pretty long, and causing visual issues.

Changes

Made slash menu width fixed.
Added overflow handling to slash menu item title and description.

Impact

N/A

Testing

Updated e2e screenshots

Screenshots/Video

N/A

Checklist

Code follows the project's coding standards.
Unit tests covering the new feature have been added.
All existing tests pass.
The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

Bug Fixes
- Improved suggestion menu layout consistency with a fixed width and minimum item height.
- Prevented long titles and descriptions from overflowing by enabling text wrapping.
- Ensured suggestion menu items maintain their intended size.

vercel · 2026-07-22T15:42:02Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	Jul 22, 2026 3:42pm
blocknote-website	Ready	Preview	Jul 22, 2026 3:42pm

coderabbitai · 2026-07-22T15:43:04Z

📝 Walkthrough

Walkthrough

The Mantine suggestion menu now uses a fixed width, flexible item heights, non-shrinking items, and wrapping constraints for long titles and subtitles.

Changes

Suggestion Menu Layout

Layer / File(s)	Summary
Menu sizing and text wrapping `packages/mantine/src/blocknoteStyles.css`	The suggestion menu is set to 350px wide; items use a 52px minimum height and do not shrink; the item body, title, and subtitle support constrained wrapping.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Poem

I’m a rabbit with styles in my den,
Where long words now wrap again.
The menu stands wide,
With items that bide—
No overflow hops out of sight!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately reflects the slash menu overflow fix.
Description check	✅ Passed	The PR description matches the template and covers summary, rationale, changes, impact, testing, and checklist.
Linked Issues check	✅ Passed	The changes address issue `#2744` by preventing slash menu item overflow with fixed width and wrapping rules.
Out of Scope Changes check	✅ Passed	The diff is limited to slash menu styling changes relevant to the reported overflow issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch slash-menu-item-overflow

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/mantine/src/blocknoteStyles.css`:
- Around line 333-334: Update the fixed width declaration in the relevant menu
style to cap its width at the available containing-block or viewport width,
while retaining the 350px maximum on wider screens. Ensure long content can wrap
without causing horizontal overflow on narrow viewports.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2f721d62-75d2-48c1-b0e1-a2621cd4c791

📥 Commits

Reviewing files that changed from the base of the PR and between dee7880 and be03d66.

⛔ Files ignored due to path filters (3)

tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-slash-menu-chromium-linux.png is excluded by !**/*.png
tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-slash-menu-firefox-linux.png is excluded by !**/*.png
tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-slash-menu-webkit-linux.png is excluded by !**/*.png

📒 Files selected for processing (1)

packages/mantine/src/blocknoteStyles.css

coderabbitai · 2026-07-22T15:44:53Z

+  width: 350px;
 }


🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Cap the fixed width on narrow viewports.

At Line [333], a hard 350px width can make the menu wider than a mobile viewport or narrow containing block. Add a responsive cap so long content wraps without causing horizontal overflow.

Proposed fix

- width: 350px; + width: min(350px, calc(100vw - 16px));

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

width: 350px;

}

width: min(350px, calc(100vw - 16px));

}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/mantine/src/blocknoteStyles.css` around lines 333 - 334, Update the fixed width declaration in the relevant menu style to cap its width at the available containing-block or viewport width, while retaining the 350px maximum on wider screens. Ensure long content can wrap without causing horizontal overflow on narrow viewports.

pkg-pr-new · 2026-07-22T15:46:10Z

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2909

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2909

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2909

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2909

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2909

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2909

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2909

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2909

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2909

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2909

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2909

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2909

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2909

commit: be03d66

github-actions · 2026-07-22T15:47:32Z

PR Preview Action v1.8.1
🚀 View preview at https://TypeCellOS.github.io/BlockNote/pr-preview/pr-2909/
Built to branch `gh-pages` at 2026-07-22 15:49 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Fixed slash menu item overflow

be03d66

coderabbitai Bot reviewed Jul 22, 2026

View reviewed changes

matthewlipski requested a review from YousefED July 22, 2026 16:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: Slash menu item overflow (BLO-1192)#2909

fix: Slash menu item overflow (BLO-1192)#2909
matthewlipski wants to merge 1 commit into
mainfrom
slash-menu-item-overflow

matthewlipski commented Jul 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 22, 2026

Uh oh!

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 22, 2026

Uh oh!

pkg-pr-new Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 22, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-07-22 15:49 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

matthewlipski commented Jul 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Rationale

Changes

Impact

Testing

Screenshots/Video

Checklist

Additional Notes

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 22, 2026

Uh oh!

coderabbitai Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-07-22 15:49 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

matthewlipski commented Jul 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 22, 2026 •

edited

Loading

github-actions Bot commented Jul 22, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-07-22 15:49 UTC.
Preview will be ready when the GitHub Pages deployment is complete.