Skip to content

fix(react): keep the inline math popup unclipped in table cells - #3002

Open
maboukerfa wants to merge 1 commit into
TypeCellOS:mainfrom
maboukerfa:fix/math-inline-table-clip
Open

fix(react): keep the inline math popup unclipped in table cells#3002
maboukerfa wants to merge 1 commit into
TypeCellOS:mainfrom
maboukerfa:fix/math-inline-table-clip

Conversation

@maboukerfa

@maboukerfa maboukerfa commented Aug 23, 2026

Copy link
Copy Markdown

Summary

Editing an inline equation inside a table cell was cut off. The source popup opens below the equation preciew, which in a table cell is outside the table, and the table clips whatever leaves it, so the input and its OK button were partly or entirely invisible.

Changes

  • Position the inline source popup with floating-ui using a fixed strategy, so no ancestor's overflow can clip it.
  • Raise the open inline popup above the table handles, which are portalled outside the editor at a higher z-index and would otherwise paint over it.

Impact

  • Inline source popups (math, diagram) now render fully in table cells.

Before

Screen.Recording.2026-08-23.at.18.12.10.mov

After

Screen.Recording.2026-08-23.at.18.14.21.mov

Testing

Current test pass, and i verified in the browser.

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

Summary by CodeRabbit

  • Bug Fixes
    • Improved positioning for inline source previews.
    • Prevented preview popups from being clipped or appearing off-screen.
    • Added automatic repositioning as surrounding content or viewport conditions change.
    • Improved popup layering and removed unwanted spacing when previews open.
    • Ensured previews remain correctly anchored to their associated content.

@vercel

vercel Bot commented Aug 23, 2026

Copy link
Copy Markdown

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

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 23, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 48d182e9-316c-491f-935c-7ad5a1133586

📥 Commits

Reviewing files that changed from the base of the PR and between bc9ba32 and 1c5dbb9.

📒 Files selected for processing (1)
  • packages/core/src/editor/Block.css

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.


📝 Walkthrough

Walkthrough

Inline source previews now use Floating UI for fixed positioning, collision handling, and automatic updates. The preview container provides the anchor, and popup CSS resets its margin and applies a UI-relative z-index.

Changes

Inline source preview

Layer / File(s) Summary
Floating positioning setup
packages/react/src/blocks/SourceWithPreview/SourceWithPreview.tsx
Added Floating UI configuration for open inline previews, including fixed bottom-start placement, offset, flip, shift, and automatic updates.
Popup wiring and CSS
packages/react/src/blocks/SourceWithPreview/SourceWithPreview.tsx, packages/core/src/editor/Block.css
The preview container registers as the floating anchor. The popup receives floating references and styles when active. Inline popup CSS removes the top margin and sets a UI-relative z-index.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 1c5db

This localized change keeps inline source popups visible in table cells without any actionable merge-blocking risk remaining.

Sequence Diagram(s)

sequenceDiagram
  participant SourceWithPreview
  participant FloatingUI
  participant PreviewPopup

  SourceWithPreview->>FloatingUI: Configure inline popup positioning
  SourceWithPreview->>FloatingUI: Register preview container anchor
  FloatingUI->>PreviewPopup: Apply computed position and styles
Loading

Suggested reviewers: nperez0111, matthewlipski

Poem

A rabbit hops where previews glow,
Floating cards now find their flow.
Anchors hold them, margins flee,
Z-index lifts them carefully.
“Pop up neatly!” sings the hare.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the primary fix: preventing inline math popups from being clipped in table cells.
Description check ✅ Passed The description covers the bug, changes, impact, testing, and visual evidence, but omits the Rationale and Additional Notes sections.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)
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.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 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

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

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.

1 participant