[Bug]: TagPicker inside Dialog causes overflow when there are too many options

[jaime-fp]

Component

TagPicker

Package version

^9.0.0

React version

^18

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.57.0 
    @types/react: ^17 => 17.0.83 
    @types/react-dom: ^17 => 17.0.26 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1

Current Behavior

Having a TagPicker with many options inside a Dialog doesn't automatically adjust the TagPicker list box height / scroll height based on the window size and available space.

Expected Behavior

TagPicker height and scroll height will adjust automatically based on the window size and the available space

Reproduction

https://stackblitz.com/edit/jbspky1c-crkomt3t

Steps to reproduce

1. Create a Dialog component that has a button to trigger its open state
2. Have a TagPicker inside the Dialog component and add many items inside that will cause it to be scrollable
3. Click on the TagPicker to open the options
4. Try to scroll down to the last option
   • Bug occurs here as the last option can't be seen due to the height of the TagPickerList overflowing the window.

Workaround: Zoom out the page (CTRL + -) to be able to select the items that are at the bottom

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

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.