Skip to content

fix: Side menu height table (BLO-1117)#2837

Open
matthewlipski wants to merge 1 commit into
mainfrom
side-menu-height-table
Open

fix: Side menu height table (BLO-1117)#2837
matthewlipski wants to merge 1 commit into
mainfrom
side-menu-height-table

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented Jun 5, 2026

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
Copy link
Copy Markdown

vercel Bot commented Jun 5, 2026

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

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

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 5, 2026

Review Change Stack

📝 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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 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
Copy link
Copy Markdown

pkg-pr-new Bot commented Jun 5, 2026

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
Copy link
Copy Markdown

github-actions Bot commented Jun 5, 2026

PR Preview Action v1.8.1

QR code for preview link

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

Built to branch gh-pages at 2026-06-05 09:15 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@matthewlipski matthewlipski changed the title fix: Side menu height table fix: Side menu height table (BLO-1117) Jun 5, 2026
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.

Drag handle is not aligned on tables

1 participant