fix(#3643): Popover overflows right viewport edge — add position-try-fallbacks and position-try-order#3791
fix(#3643): Popover overflows right viewport edge — add position-try-fallbacks and position-try-order#3791
Conversation
❌ Deploy Preview for benji-docs-previews failed.
|
…r viewport overflow Closes #3643 Add `position-try-fallbacks: flip-inline` to the `.popover-content` base CSS so the browser automatically right-aligns the popover when left-alignment would cause it to overflow the right viewport edge. Also update `.use-anchor-based-positioning.position-above` to use `flip-inline` instead of `none` so the horizontal overflow fix applies to above-positioned popovers too. The `position-right` variant retains `none` since it has intentional directional positioning. Add PR test page (bug3643) with three test cases demonstrating the fix. Agent-Logs-Url: https://github.com/GovAlta/ui-components/sessions/89c8f24d-cd80-41af-9b51-78538427be41 Co-authored-by: bdfranck <1479091+bdfranck@users.noreply.github.com>
bdfranck
left a comment
bdfranck
left a comment
There was a problem hiding this comment.
@copilot Here's what I see in the latest version of Chrome.
The left-side trigger popover is left-aligned with the anchor...
...but the right-side trigger is still left-aligned with the anchor. It's just shorter to not leave the viewport.
Should I expect to see this? I was hoping to see it right-aligned with the anchor item.
…line selection The flip-inline fallback wasn't triggering because Chrome sizes the popover via width:fit-content constrained to the available space (from anchor's left to viewport right), so the element appears to "fit" and position-try-fallbacks never fires. Adding position-try-order: most-inline-size tells the browser to pick whichever try-option yields the most inline width for the element. Near the right edge the flip-inline (right-aligned) option wins because it has more space to the left. Agent-Logs-Url: https://github.com/GovAlta/ui-components/sessions/d5d27eb5-05a5-41a3-b3dd-fcc6efd29db4 Co-authored-by: bdfranck <1479091+bdfranck@users.noreply.github.com>
The root cause was that Added |
The CSS Anchor Positioning rewrite hardcoded
inset-inline-start: anchor(left)with no overflow handling, causing the popover to extend off-screen when the trigger is near the right viewport edge.Before (the change)
Popover always left-aligned with the trigger. When the trigger was near the right viewport edge, the popover extended off-screen.
After (the change)
Popover.svelte— CSS onlyposition-try-fallbacks: flip-inlineto.popover-contentbase rule. When the left-aligned position would overflow, the browser triesinset-inline-end: anchor(right)— right-aligning the popover with the trigger's right edge.position-try-order: most-inline-sizeto.popover-contentbase rule. This ensures the browser picks whichever alignment (left or right) gives the element the most inline width. This is necessary becausewidth: fit-contentcauses Chrome to shrink the popover to the available space rather than detecting overflow, so without thisflip-inlinewould never trigger near the right edge.position-try-fallbacks: none→flip-inlineon.use-anchor-based-positioning.position-aboveso the same fix applies forposition="above".position-rightretainsposition-try-fallbacks: none— directional intent is explicit there.Make sure that you've checked the boxes below before you submit the PR
Steps needed to test
/bugs/3643in the React PRS playground (npm run serve:prs:react)position="above"row and the MenuButton row