fix(popover): adjust position to account for approximate safe area

[averyrousseau]

Issue number: resolves #28411

---

What is the current behavior?

Popover position does not account for safe area. iOS has some existing logic that attempts to do so, but it always uses a hardcoded value of 25px for the margin (or 0 for size="cover" popovers).

What is the new behavior?

The most straightforward way of accounting for safe area would be to use window.getComputedStyle() to calculate the safe area margins when the popover's position is being determined. However, this function is very expensive, so using it would introduce performance issues. Until a better strategy can be found that properly accounts for all cases, this PR approximates things by making a guess at the safe area margins.

Note that the position of the arrow on iOS popovers has not been adjusted to account for safe area in the same way as the popover content. I chose to leave it like this because the behavior in main doesn't adjust the arrow either, even with the 25px guess at the safe area margin. Moving the arrow will also add complexity to account for the different values of side, which increases the risk of bugs. If it does need fixing, it would probably be best to do that as separate scope.

This PR has been targeted to a minor release to de-risk the behavior change.

The easiest way to test the behavior is with the adjustment test, as this lets you present the popover from anywhere on the screen. Checking the new "show safe area approximation" checkbox highlights the safe area margin guesses in blue.

Does this introduce a breaking change?

• Yes
• No

Other information