[Bug]: Tree with maxWidth defined, cannot display ellipsis for text in TreeItemLayout

[logicaloud]

Library

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

System Info

Browsers:     
    Edge: Chromium (119.0.2151.44)
Fluent UI V9: 
    9.38.0

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/wispy-cherry-jlqy6r?file=/src/example.tsx

Bug Description

Actual Behavior

It seems it is no longer possible to display text ellipsis for tree nodes within a tree that has a maxWidth defined. The codesandbox reproduction above is the previously suggested solution (#28392) updated to use Fluent UI v9.38.0; this is no longer working. The result is a tree that has text wrapped instead of displaying ellispsis:

Expected Behavior

See expected result here: https://codesandbox.io/s/great-lichterman-w3wf9f?file=/example.tsx

Maybe I'm missing something obvious in v9.38.0?

Logs

No response

Requested priority

High

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.

[miroslavstastny]

The content slot on TreeItemLayout had been renamed to main before stable release.
Apply the style overrides to the main slot:

// in file scope
const useStyles = makeStyles({
  cropTreeItemLayout: {
    overflowX: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  }
})

//...

// in component
const classes = useStyles();

//...

return <TreeItemLayout main={{className: classes.cropTreeItemLayout}} /> 

https://codesandbox.io/s/treeitemlayout-overflow-z6w7fy

[logicaloud]

Thank you! This simple issue was holding me back from updating to the latest version.