Skip to content

Fix: cap context menu height so it doesn't render off-screen - #1786

Open
julcap wants to merge 1 commit into
josdejong:developfrom
julcap:fix/context-menu-limit-height
Open

Fix: cap context menu height so it doesn't render off-screen#1786
julcap wants to merge 1 commit into
josdejong:developfrom
julcap:fix/context-menu-limit-height

Conversation

@julcap

@julcap julcap commented Sep 11, 2026

Copy link
Copy Markdown

Summary

The per-node context menu (Type / Insert / Duplicate / Remove) and the append-node menu are constructed without limitHeight:

const menu = new ContextMenu(items, { close: onClose })

TreePath.js's breadcrumb menu already opts into this:

const menu = new ContextMenu(items, { limitHeight: true })

Without it, ContextMenu.show() can fall back to "show below" even when neither direction has enough room, and the menu's own height is never capped. In an editor embedded in a size-constrained container (e.g. a small panel, an iframe, a modal), this means the bottom items of the menu (typically Duplicate/Remove) render past the container's edge and become unreachable - there's no scrollbar, they're just cut off.

This is the same underlying gap described in #571 for the general "popups can't overflow the editor" case, specifically for the per-node context menu, which never got the limitHeight treatment TreePath.js already has.

Change

Pass limitHeight: true in both places ContextMenu is constructed for per-node menus (src/js/Node.js, src/js/appendNodeFactory.js), mirroring the existing TreePath.js usage. This caps the menu's list height to the actually-available space and adds an internal scrollbar (both handled already inside ContextMenu.show() when limitHeight is set), so the menu always renders fully inside the frame instead of being clipped.

Testing

  • npm run lint passes.
  • Manually verified against the ContextMenu.show() collision-detection logic, which already implements the height-limiting behavior for TreePath.js's menu - this change only extends the same, already-proven option to the two other call sites.

Related to #571.

The per-node context menu (Type/Insert/Duplicate/Remove, and the
append-node menu) is created without `limitHeight`, unlike the
TreePath breadcrumb menu which already passes `limitHeight: true`
(see TreePath.js). Without it, ContextMenu.show() can pick "show
below" as a fallback even when there isn't enough room in either
direction, and the menu's own height is never capped - so in an
editor embedded in a size-constrained container, the bottom items
of the menu render past the container's edge and are unreachable.

Passing `limitHeight: true` (mirroring TreePath.js) caps the menu's
list height to the actually available space and adds an internal
scrollbar, so it always renders fully inside the frame instead of
being cut off.

Related to josdejong#571.
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