[Bug]: Dialog overflow handling seems off on small viewports (e.g iPhone) #33382
Open
Description
Component
Dialog
Package version
9.56.3
React version
18.3.1
Environment
System:
OS: macOS 15.1.1
CPU: (8) arm64 Apple M2
Memory: 138.34 MB / 24.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome Canary: 133.0.6872.0
Safari: 18.1.1
npmPackages:
@fluentui/react-components: ^9.56.3 => 9.56.3
@types/react: ^18.3.12 => 18.3.12
@types/react-dom: ^18.3.1 => 18.3.1
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
Current Behavior
Currently, when the Dialog is filled with lots of controls it overflows even though it tries to handle it by scrolling at some point. You can see that the heading in the dialog is cut off in the screenshot.
Expected Behavior
Content should stay in its borders
Reproduction
https://stackblitz.com/~/github.com/fruhnow/vitejs-fluentui-test
Steps to reproduce
- open repro (use simulator or real device)
- see overflow
Are you reporting an Accessibility issue?
None
Suggested severity
Urgent - No workaround and Products/sites are affected
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.
Activity