fix: align side menu to tables (BLO-1117)

[matthewlipski]

Summary

This PR makes the side menu slightly taller when next to table blocks, so that it's aligned with the first row.

Closes #2604

Rationale

This is a minor visual improvement.

Changes

• Added CSS rule.

Impact

N/A

Testing

N/A (imo too minor to warrant a visual regression test)

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
  • Adjusted the table editor side menu height for improved visual layout.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blocknote	Error		Jun 5, 2026 9:33am
blocknote-website	Error		Jun 5, 2026 9:33am

[coderabbitai]

📝 Walkthrough

Walkthrough

CSS rule added to constrain the side menu height to 60px specifically for table block types. A new selector .bn-side-menu[data-block-type="table"] is introduced in the React editor styles to apply this height constraint.

Changes

Table Side Menu Styling

Layer / File(s)	Summary
Table side menu height override packages/react/src/editor/styles.css	CSS rule added for .bn-side-menu[data-block-type="table"] setting height: 60px.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

• nperez0111

Poem

🐰 A rabbit hops through CSS rows,
"Sixty pixels!" the table side-menu shows,
With one small rule, the height takes form,
Simple and neat—the styling norm. 🎨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The pull request description follows the repository template with all required sections completed and relevant information provided for this CSS styling change.
Title check	✅ Passed	The title 'fix: Side menu height table' directly and clearly reflects the main change: adjusting the side menu height for table blocks (BLO-1117), which matches the CSS rule added to style .bn-side-menu[data-block-type="table"].

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 side-menu-height-table

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/react/src/editor/styles.css (1)

287-289: 💤 Low value

Consider adding a comment to explain the height value.

Adding a brief comment explaining that 60px aligns with the table's first row height would improve maintainability, similar to the comment at line 258.

📝 Suggested comment

+/* Matches Side Menu height to first table row */
 .bn-side-menu[data-block-type="table"] {
   height: 60px;
 }

🤖 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/react/src/editor/styles.css` around lines 287 - 289, Add a one-line
comment above the .bn-side-menu[data-block-type="table"] rule explaining that
height: 60px matches the table's first row height (so the side menu aligns
visually with the first row), mirroring the explanatory style used for the
similar rule at the other table-related selector; reference the selector
.bn-side-menu[data-block-type="table"] and the height: 60px value in the
comment.

🤖 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.

Nitpick comments:
In `@packages/react/src/editor/styles.css`:
- Around line 287-289: Add a one-line comment above the
.bn-side-menu[data-block-type="table"] rule explaining that height: 60px matches
the table's first row height (so the side menu aligns visually with the first
row), mirroring the explanatory style used for the similar rule at the other
table-related selector; reference the selector
.bn-side-menu[data-block-type="table"] and the height: 60px value in the
comment.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d889c711-6553-4a98-b2db-2e7ff88ae3b9

📥 Commits

Reviewing files that changed from the base of the PR and between ec9c151 and 33a6333.

📒 Files selected for processing (1)

• packages/react/src/editor/styles.css

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 33a6333

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-06-09 08:45 UTC