[css-forms-1] Ensure ::picker() options are always reachable on small viewports

[nt1m]

After doing some testing for various customizable select demos on mobile, @smfr found that the options were not reachable on mobile on long selects (take the color select from https://codepen.io/argyleink/pen/wvYrZEV for instance), which is an usability regression from the native select.

I suggest adding this to the UA sheet:

::picker(select) {
  max-height: 100vh;
}

(not sure if it should be dvh/svh or vh)

This seems to make the picker limit its height to the viewport to which point you can scroll within the picker.

cc @lukewarlow @josepharhar @fantasai

[lukewarlow]

+1 definitely should scroll if it's longer than the viewport.

Though I think there's still scenarios where this could happen. If the select is half way down the page and you open a picker thats 100vh it'll still be half off the page before it scrolls?

[nt1m]

I think anchor positioning should already take that into account and try to make sure it fits in the viewport (by moving the insets), this is how it works in WebKit at least:

Screen.Recording.2026-02-18.at.1.15.39.PM.mov

[josepharhar]

I'd be surprised if this broke any sites by adding, so it seems ok to me.

[nt1m]

Elika suggested max-block-size: 100vb (the logical version of the property) which is better.

[mfreed7]

Doesn't the existing max-block-size: stretch rule take care of this problem?

At least on this test site, in Chrome, it seems to do the right thing:

[nt1m]

I somehow missed that. Thanks for pointing it out! I'll see if this addresses things on our side

[nt1m]

I'll close this issue for now, and re-open if needed.