fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: ToastBody multiline paragraph line height issue

Open dmytrokirpa opened this issue 4 months ago • 0 comments

Component

Toast

Package version

9.58.3

React version

17

Environment

System:
    OS: macOS 15.5
    CPU: (16) arm64 Apple M3 Max
    Memory: 1.15 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 137.0.7151.69
    Edge: 137.0.3296.83
    Safari: 18.5
  npmPackages:
    @fluentui/react-icons: ^2.0.301 => 2.0.301 
    @types/react: 17.0.44 => 17.0.44 
    @types/react-dom: 17.0.15 => 17.0.15 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2

Current Behavior

The line height for ToastBody isn't set right, so multi-line text looks off.

Expected Behavior

The line height for ToastBody is set correctly, and multi-line text is properly formatted

Reproduction

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

Steps to reproduce

Pick any example of fluent V9 Toast and pass long message in ToastBody, using stackbliz. There's line spacing issue as 1st line meets the 2nd line

Image

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

  • [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.

dmytrokirpa avatar Jun 17 '25 07:06 dmytrokirpa