fix: Slash menu item overflow (BLO-1192)#2909
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe 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. ChangesSuggestion Menu Layout
Estimated code review effort: 1 (Trivial) | ~5 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
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
⛔ Files ignored due to path filters (3)
tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-slash-menu-chromium-linux.pngis excluded by!**/*.pngtests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-slash-menu-firefox-linux.pngis excluded by!**/*.pngtests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-slash-menu-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (1)
packages/mantine/src/blocknoteStyles.css
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/mantine
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
|
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
Impact
N/A
Testing
Updated e2e screenshots
Screenshots/Video
N/A
Checklist
Additional Notes
N/A
Summary by CodeRabbit