[select] Height of popover too large when using alignItemWithTrigger

[joncoronel]

Bug report

Current behavior

When using the select component with alignItemWithTrigger, with a specific sequence and styles, the height of the popup can be too large.
The sequence:
Open browser dev tools and toggle on device toolbar -> position trigger so that its in the bottom half of the viewport but allow enough space underneath so that the popup will open at the bottom -> open select popup -> close the popup -> toggle off device toolbar -> open select popup again.

After this sequence, the popup will stretch its height to the bottom of the viewport regardless of inner content height. But once the popover is closed and reopened, the popup height is correct.

This specifically occurs when a fixed max height is set on the List sub-component and max-h-[var(--available-height)] is set on the Popup sub-component. The use case for doing that is a component wrapper where I can simply pass a fixed max height to the List (for overflow purposes when alignItemWithTrigger positioning mode is disabled on mobile) whille not overriding the max-h-[var(--available-height)].

select_bug.mp4

Expected behavior

Popup height when alignItemWithTrigger positioning mode is enabled should be based on inner content height. This specific sequence + styles leads to that not being the case.

Reproducible example

The example below is the base example provided in the base ui select docs. The only change that I made was to move the max-h-[var(--available-height)] to the Popup and set max-h-[200px] on the List.

Example

Base UI version

v1.0.0

Which browser are you using?

Chrome

Which OS are you using?

Windows

[atomiks]

move the max-h-[var(--available-height)] to the Popup

This style itself creates other issues, see:

The best solution here is to only apply var(--available-height) when data-side isn't "none":

[&:not([data-side=none])]:max-h-[var(--available-height)]