fluentui
fluentui copied to clipboard
[Bug]: ToastBody multiline paragraph line height issue
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
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.