Feature request

Overview

When using a Popover, there are situations where due to the placement of the anchor and a small screen size, the popover will collide with the boundary regardless of which position it chooses. In this case, the popover will overflow.

Currently, the available tools to handle this is the CSS variable --radix-popover-content-available-height and --radix-popover-content-available-width, which can be used to then set the max-height or max-width and make the Popover content scrollable. However, this is not ideal in some cases, for example, when using the Popover to make a date picker component where a scroll would make picking a date awkward.

The underlying library used in a Popover, Floating UI, has an option to allow shifting through the cross axis. This is currently set to false with no way to override it. Would it be possible to expose this through a prop, e.g. allowCrossAxisShift?

The only complication in this is the interaction between shift and flip middlewares. However, flip could be excluded from the middlewares if crossAxis is true in shift as it performs the same role.

Who does this impact? Who is this for?

It would help users of Radix Popovers by giving an additional option for how Popover are placed.