[Bug]: Dialog title exceeds out of the dialog area when title has long text

[ymyqwe]

Library

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

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 18.01 GB / 63.95 GB
  Browsers:
    Edge: Chromium (126.0.2592.56)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

None

Reproduction

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

Bug Description

Actual Behavior

Expected Behavior

Title should not exceeds out of the dialog area.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[smhigley]

This is specifically because there is one long word with no spaces that exceeds the horizontal space. We generally don't apply word-wrap: break-word styles by default, but that would fix this issue. To do that, you would do:

const useStyles = makeStyles({
  longText: {
    wordWrap: 'break-word',
  },
});

// in render
<DialogTitle className={styles.longText}>

I've updated the stackblitz to show the fix here: https://stackblitz.com/edit/tcnkrj-noujrx?file=src%2Fexample.tsx

@ymyqwe does that approach solve your original issue?

[maxburs]

@smhigley Why don't you apply word-wrap: break-word by default? Is there something I should look out for when applying it?