[Bug]: The horizontal overflow behavior of <Tree> is not well-defined

[chenxinyanc]

Library

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

System Info

"@fluentui/react-components": "9.18.6"

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/fluent-ui-v9-tree-horizontal-overflow-k2lf5r?file=/example.tsx

Bug Description

Actual Behavior

As long as there is any item overflows horizontally, there will be inconsistency on the item widths.

And the action button of the overflowed item will not be accessible from the screen (clipped by the scrollable container).

Expected Behavior

1. All the items keep the same width.
2. Action button appears to the right margin inside the scrollable container, instead of being just outside the scrollable container.
   
   

Logs

No response

Requested priority

Normal

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.

[bsunderhus]

This will be blocked meanwhile some major changes are going through #27701

[msft-fluent-ui-bot]

🎉This issue was addressed in #27825, which has now been successfully released as @fluentui/react-components@v9.20.0.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #27825, which has now been successfully released as @fluentui/react-tree@v9.0.0-beta.13.:tada:

Handy links:

• Release Notes
• Official NPM Release