[Popover] Positioning overlap with anchorEl when opened near the bottom of the viewport

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The popover overlaps the anchorEl.

Expected behavior 🤔

The popover goes above the anchorEl.

Steps to reproduce 🕹

This can be reproduced on the Popover anchor playground.

Steps:

1. Set the anchorOrigin.vertical property to bottom. The popover should now be opening below the anchorEl.
2. Scroll down so that the anchorEl is at the bottom of the viewport.
   1. Playing around with small scrolling adjustments near the bottom of the viewport yields multiple different popover positioning results, i.e. at the very bottom of the viewport, partially cut off by the bottom of the viewport, and a few pixels above the bottom of the viewport.
3. Click on the anchorEl to open the popover.

Context 🔦

I am trying to implement a Menu where, when the menu is opened, the menu items are listed below the anchorEl. Additionally, when the user opens the menu near the bottom of the viewport, I would like the menu items to automatically adjust and open above the anchorEl, without overlapping it.

Your environment 🌎

Environment info excluded since this issue is reproducible on the MUI popover anchor playground.

Reproduce the overlap using the Popover anchor playground with anchorOrigin.vertical set to bottom, then inspect the Popover positioning behavior around viewport boundaries. Confirm the fix by checking that a Popover opened near the bottom moves above the anchorEl without overlapping it and remains stable during small scroll adjustments.