[Bug]: TreeItemLayout's width behavior doesn't match TreeItemPersonaLayout's

[mindlessroman]

Component

Tree

Package version

^9.67.0

React version

^18.2.0

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 AMD EPYC 7763 64-Core Processor
    Memory: 18.36 GB / 31.95 GB
  Browsers:
    Edge: Chromium (138.0.3351.95)
  npmPackages:
    @fluentui/react: ^8.123.1 => 8.123.1
    @fluentui/react-components: ^9.67.0 => 9.67.0
    @fluentui/react-icons: ^2.0.306 => 2.0.306
    @types/react: ^18.2.66 => 18.3.23
    @types/react-dom: ^18.2.22 => 18.3.7
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1

Current Behavior

(Context: I was switching some components to TreeItemLayout because of the behavior I reported in #34914)
I noticed that the content which used to be spread out in the TreeItemPersonaLayout now was compressed together, despite fiddling with some CSS styling:

(I did my best for not having too many colors being too similar for color-blind safety, but the colors are for demonstration the behavior in space)

Expected Behavior

I'd expect the behavior to be somewhat similar unless the width is a property that is called out to behave differently between the two.

Both of these layouts come with specific sets of properties, making them suitable for different use cases.

Please refer to the table at the top of this page for a detailed comparison of the properties available for both TreeItemLayout and TreeItemPersonaLayout. Notably, some properties like iconBefore, iconAfter, media, and description are unique to one layout or the other, enabling more specialized customization depending on your needs.

Reproduction

https://stackblitz.com/edit/t9nbn2cb?file=src%2Fexample.tsx

Steps to reproduce

1. Go to the Stackblitz.
2. See that the TreeItemLayout is scrunched despite having the same CSS rules applied as TreeItemPersonaLayout.
3. See that TreeItemLayout can spread out, but only if you specifically call out the width in pixels.

(I don't believe this is an accessibility issue.)

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?

yes

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]

Hey @mindlessroman , I can confirm the issue