fix: align drag handle with table blocks (fixes #2604)

[iyedbenhamadi]

Summary

Fix the drag handle floating ~9px above table blocks.

Rationale

The side menu (drag handle) positions itself using the blockContent element's bounding box via Floating UI with left-start placement. For tables, the .tableWrapper has padding-top: var(--bn-table-handle-size) (9px) reserved for row/column handle overlays. This internal padding is included in the bounding box, causing the drag handle to align to the top of the padding
instead of the visible table border.

Changes

• Added margin-top: calc(-1 * var(--bn-table-handle-size)) to
  .bn-editor [data-content-type="table"] .tableWrapper in editor.css

• This pulls the wrapper up by the exact padding-top amount, so the bounding
  box top edge matches the visible table start while preserving the internal
  padding needed for table handles

Impact

• Only affects table blocks — no other block types are changed
• Table handle positioning (row/column handles) is unaffected since the
  internal padding is preserved
• Spacing between tables and adjacent blocks remains visually identical

Testing

Manual testing:

• Hovered over table blocks — drag handle now aligns horizontally with the table
• Verified blocks above/below tables maintain correct spacing
• Confirmed table row/column handles still position correctly
• Confirmed add row/column (+) buttons still function
• Tested in Firefox and Chrome

Screenshots/Video

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

Fixes #2604
Single CSS line change ,no JS modifications needed.

Summary by CodeRabbit

• Style
  • Refined table spacing and positioning within the editor for improved layout consistency.

[vercel]

@iyedbenhamadi is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cd39ea9e-eaea-4c33-95f6-2f585b666fd0

📥 Commits

Reviewing files that changed from the base of the PR and between a850078 and bb15f35.

📒 Files selected for processing (1)

• packages/core/src/editor/editor.css

---

📝 Walkthrough

Walkthrough

CSS adjustment to table wrapper styling in the editor to correct drag handle alignment. Added a negative margin-top rule using the handle-size custom property to shift the table wrapper upward, addressing vertical misalignment of the drag handle relative to the table.

Changes

Cohort / File(s)	Summary
Table Wrapper Styling packages/core/src/editor/editor.css	Added margin-top: calc(-1 * var(--bn-table-handle-size)) to .tableWrapper selector to shift the table wrapper upward and align the drag handle vertically with the table content.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A handle that floated too high in the air,
Now nestles just right with a margin-aware care,
One CSS tweak, a calc so divine,
Makes table and handle in perfect align! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing drag handle alignment with table blocks, and references the linked issue.
Description check	✅ Passed	The description includes all major template sections with sufficient detail: Summary, Rationale, Changes, Impact, and Testing with manual verification across browsers.
Linked Issues check	✅ Passed	The PR directly addresses the core requirement from #2604: fixing misalignment of the drag handle on table blocks through a CSS adjustment that repositions the table wrapper.
Out of Scope Changes check	✅ Passed	All changes are tightly scoped to fixing the drag handle alignment issue; only the .tableWrapper CSS is modified with no unrelated alterations.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: bb15f35