Skip to content

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

Open
matthewlipski wants to merge 2 commits into
mainfrom
slash-menu-item-overflow
Open

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

Conversation

@matthewlipski

@matthewlipski matthewlipski commented Jul 22, 2026

Copy link
Copy Markdown
Collaborator

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 by constraining its horizontal size and enabling vertical scrolling when needed.
    • Updated suggestion items to use a minimum height and prevent unwanted shrinking.
    • Ensured long titles and descriptions wrap correctly to avoid overflow and layout breakage.

@vercel

vercel Bot commented Jul 22, 2026

Copy link
Copy Markdown

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

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

Request Review

@coderabbitai

coderabbitai Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2521bc9a-0316-48f1-b725-e948961dcc73

📥 Commits

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

📒 Files selected for processing (1)
  • packages/mantine/src/blocknoteStyles.css
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/mantine/src/blocknoteStyles.css

📝 Walkthrough

Walkthrough

The Mantine suggestion menu now has a 350px maximum width, vertical scrolling, reduced padding, flexible non-shrinking item heights, 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 has constrained width and vertical scrolling; items preserve a 52px minimum height, while their body, title, and subtitle support constrained wrapping.

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

Suggested reviewers: yousefed

Poem

A rabbit hops through menus bright,
Long words now wrap just right.
Items stand tall,
No overflow at all—
Clean styles bring delight!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly names the main fix: slash menu item overflow.
Description check ✅ Passed The description follows the template and covers summary, rationale, changes, impact, testing, checklist, and notes.
Linked Issues check ✅ Passed The changes address issue #2744 by constraining menu width and preventing title/description overflow.
Out of Scope Changes check ✅ Passed The diff appears limited to the slash menu overflow fix with no unrelated changes.
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 coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread packages/mantine/src/blocknoteStyles.css Outdated
@pkg-pr-new

pkg-pr-new Bot commented Jul 22, 2026

Copy link
Copy Markdown

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: 07e3f03

@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://TypeCellOS.github.io/BlockNote/pr-preview/pr-2909/

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

@matthewlipski
matthewlipski requested a review from YousefED July 22, 2026 16:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

suggestion menu Overflowing content

1 participant