Popover: Overflows right edge when trigger is near viewport boundary

[twjeffery]

Description

The Popover rewrite (PR #3478) switched to CSS Anchor Positioning, which always left-aligns the popover to the trigger via inset-inline-start: anchor(left). When the trigger is near the right edge of the viewport, the popover content extends off-screen.

The previous JS-based positioning handled this automatically by clamping to the viewport.

To reproduce

Place a Popover trigger near the right viewport edge with a maxWidth wider than the trigger (e.g. 280px). Open it. The content overflows right.

Possible fixes

• Add an alignment prop (start / center / end) so consumers can control horizontal alignment
• Use position-try-fallbacks in the anchor positioning CSS to automatically flip when it would overflow

Workaround

Setting --offset-left as a CSS custom property on a parent element shifts the popover via the translate property. It inherits into the shadow DOM. Fragile since it's a fixed pixel value.

Screenshots

[bdfranck]

Anchor positioning is very flexible. Before resorting to JS or fixed value CSS, we can try setting some anchor fallback positions.