[Bug]: Combobox options list overflows the screen top under small viewports

[RamyRafik]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 Intel(R) Xeon(R) W-2255 CPU @ 3.70GHz
    Memory: 37.63 GB / 63.69 GB
  Browsers:
    Edge: Spartan (44.22621.1555.0), Chromium (111.0.1661.62)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/s/runtime-river-pg2kgy?file=/example.tsx

Bug Description

Actual Behavior

Currently, the listbox (Options list) has a max-height of 80vh. This would work if the Combobox is at the top or bottom of the page, but doesn't work if it's in the middle.
Under small viewports (where the listbox can't open to the bottom or right), the listbox would overflow the screen top edge.

Expected Behavior

The listbox should be always clamped by the screen edges.

Logs

No response

Requested priority

High

Products/sites affected

PowerApps

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

This was just fixed in #27521, and should be available now :)

[smhigley]

Ah sorry, I misread the issue -- for comboboxes at screens small enough that they can't fit to the side, above, or below, you're right that they will be clipped.

I think there are two possible approaches:

1. We let the popup overlap the target when it can't fit on any side
2. We query the relative position of the trigger element in the document, and set max-height based on that.

This might also apply to Menu and Popover, since I don't believe we do any height-limiting based on available space in v9 yet.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.