Layer: centered tooltip overflows viewport edge — flip-only position-try-fallbacks can't resolve inline overflow of a centered layer

[josephfarina]

Version: @astryxdesign/core 0.1.2

Summary

useLayer positions context-mode layers with native CSS anchor positioning and sets:

positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline',

(src/Layer/useLayer.tsx, renderContext)

Flipping is the only fallback strategy. When a layer is center-aligned and overflows one inline edge, flip-inline mirrors center → center — a no-op — so no fallback resolves the overflow and the layer renders partially off-screen. The same applies to block-centered layers (placement="start"|"end") overflowing top/bottom.

Repro

A Tooltip (default placement="above", alignment="center") on an anchor near the right viewport edge:

• anchor at x ≈ 1204 on a 1280px viewport
• tooltip content 132px wide → centered box spans x 1159 → 1291, i.e. ~11px past the viewport edge, clipped

Any tooltip/popover on a right-aligned control (row actions, kebab menus, table trailing columns) hits this.

Expected

The layer stays within the viewport — sliding along the overflowing axis when centering doesn't fit, the way position-area span fallbacks (or position-try-order) allow.

Suggested fix

Append span-based fallbacks after the flips so the browser can shift along the alignment axis as a last resort, e.g. for above/below placements:

position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline,
  top span-left, top span-right, bottom span-left, bottom span-right;

(or the logical-property equivalents, generated per placement in getPositionArea's terms).

Workaround

Choose a placement/alignment that happens to fit (e.g. placement="start" for right-edge anchors), which is what we're doing.