CustomSelectControl V2 popover renders below position: sticky elements

[ciampo]

As flagged in https://github.com/WordPress/gutenberg/pull/62821 (see PR description):

The V2 version of the component automatically "flips" the popover to render on top of the trigger if there isn't enough space below it. In the specific example of the block toolbar, this causes a small visual glitch when the browser's viewport is short enough to cause the flip:

This glitch happens because the block toolbar's header has position: sticky, which causes it to render on top of the select popover despite a lower z-index.

A few preliminary ideas that try to avoid the problem rather than solving it:

• disallow the popover to flip
• allow for lower minimum height

I'm not sure we can solve this systematically at the CSS level. At most we could look into where in the DOM the popover is rendered, and consider portalling it so that it plays better with the stacking context?

[ciampo]

While https://github.com/WordPress/gutenberg/pull/63357 should avoid the issue for the V2 legacy adapter (soon to be the new V1) component, we will still need to understand how to best solve this for the V2:

• keep flip disabled (although we could encounter the same issue in future layouts / etc)
• somewhat set as "boundaries" for the popover the correct height of the panel (excluding the header)
• solve it via allowing the popover to be portaled to a plan in the DOM where the stacking context is not a constraints
• ?