fix: Grid suggestion menu item padding (BLO-1225)

[matthewlipski]

Summary

This PR adjusts the padding around the grid suggestion menu/emoji picker. This is because on some platforms, certain emojis are very large and have a black border. When an item/emoji is selected, a contrasting background color is applied which isn't clearly visible with these emojis. Therefore, the items have been made smaller but padding has been increased to make their overall size the same as before.

Closes #2819

Rationale

See above.

Changes

See above.

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

• Style
  • Improved suggestion menu item styling across supported themes.
  • Reduced text size for better visual balance.
  • Increased and standardized padding for improved spacing and consistency.

[vercel]

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

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 06281683-1fb9-4b63-93ea-aac56f14375f

📥 Commits

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

⛔ Files ignored due to path filters (9)

• tests/src/end-to-end/ariakit/__screenshots__/ariakit.test.tsx/ariakit-emoji-picker-chromium-linux.png is excluded by !**/*.png
• tests/src/end-to-end/ariakit/__screenshots__/ariakit.test.tsx/ariakit-emoji-picker-firefox-linux.png is excluded by !**/*.png
• tests/src/end-to-end/ariakit/__screenshots__/ariakit.test.tsx/ariakit-emoji-picker-webkit-linux.png is excluded by !**/*.png
• tests/src/end-to-end/shadcn/__screenshots__/shadcn.test.tsx/shadcn-emoji-picker-chromium-linux.png is excluded by !**/*.png
• tests/src/end-to-end/shadcn/__screenshots__/shadcn.test.tsx/shadcn-emoji-picker-firefox-linux.png is excluded by !**/*.png
• tests/src/end-to-end/shadcn/__screenshots__/shadcn.test.tsx/shadcn-emoji-picker-webkit-linux.png is excluded by !**/*.png
• tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-emoji-picker-chromium-linux.png is excluded by !**/*.png
• tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-emoji-picker-firefox-linux.png is excluded by !**/*.png
• tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-emoji-picker-webkit-linux.png is excluded by !**/*.png

📒 Files selected for processing (3)

• packages/ariakit/src/style.css
• packages/mantine/src/blocknoteStyles.css
• packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx

---

📝 Walkthrough

Walkthrough

Grid suggestion menu item typography and spacing are adjusted consistently across Ariakit, Mantine, and ShadCN implementations.

Changes

Grid suggestion item styling

Layer / File(s)	Summary
Grid item sizing updates packages/ariakit/src/style.css, packages/mantine/src/blocknoteStyles.css, packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx	Ariakit and Mantine reduce font size from 24px to 20px and increase padding from 4px to 6px. ShadCN switches to uniform p-2 padding and reduces emphasized text from text-lg! to text-base!.

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

Poem

I’m a small rabbit, pleased to see
Neater menus hop so merrily.
Smaller letters, padding bright,
Three themes now fit just right.
Hop, hop—what a tidy sight!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and matches the main UI spacing change in the grid suggestion menu item.
Description check	✅ Passed	The description follows the template and covers summary, rationale, changes, impact, testing, screenshots, checklist, and notes.
Linked Issues check	✅ Passed	The code changes address #2819 by resizing emoji/menu items to improve selected-state visibility for large Microsoft emojis.
Out of Scope Changes check	✅ Passed	The changed CSS and class names are all directly related to the emoji picker and suggestion menu sizing fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch emoji-picker-item-padding

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 4b44a90

[github-actions]

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