React

useContextMenu({ ...definition, meta: row })

Trap 1: a clipping scroll container

overflow: hidden; height: 200px. A menu rendered as a child of this box would be cut off at the fold. In the top layer it is not clipped at all.

Trap 2: a composited ancestor

transform: translateZ(0) makes this box the containing block for any position: fixed descendant, so a fixed menu inside it would land at the wrong coordinates. A popover in the top layer has no such ancestor.

Trap 3: the viewport corner

The target is pinned inside 50px of both the inline-end and the block-end edge, so the menu has room in neither axis and must flip on both.