fluentui
fluentui copied to clipboard
microsoft
[Bug]: react-dialog / drawer pushes elements a little extra to the right side
Library
React Components / v9 (@fluentui/react-components)
System Info
System:
OS: Windows 11 10.0.22631
CPU: (12) x64 Intel(R) Xeon(R) W-2133 CPU @ 3.60GHz
Memory: 52.05 GB / 63.57 GB
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.22621.3527
Are you reporting an Accessibility issue?
no
Reproduction
https://stackblitz.com/edit/qy7eyr-7mlpy8?file=src%2Fexample.tsx
Bug Description
Actual Behavior
We recently upgraded fluentui/react-components from 9.47.1 to 9.54.4, @fluentui/react-drawer upgraded from 9.1.9 to 9.5.7, @fluentui/react-dialog from 9.9.15 to 9.11.7. The more detailed package changes is in the internal teams channel.
When using drawer opened from right, the scrollbar seems to take up empty blank space, the elements seem to be pushed to the right side as screenshot shows:
Expected Behavior
Do not expect the blank space of scrollbar and the content should not be pushed to the right.
Expected behavior sandbox: https://stackblitz.com/edit/qy7eyr-51y176?file=package.json
Logs
No response
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
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.
@micahgodbolt thank you for the info. In the older version, the scrollbar white space will be taken up when the dialog / drawer shows. Is it still possible with the newer version? Thanks!
@bsunderhus please check this one, might be related to recent scrollbar-related changes.
Jus to give a little context here, the PR https://github.com/microsoft/fluentui/pull/31199 has introduced scrollbar-gutter: stable style to <html> element when the scrollbar is visible to ensure that animations and page content do not suffer any jump effect due to the scroll locking effect of Dialog (modal Dialog removes scrolling from body when it is opened).
Seems like position: fixed elements do not count for the scrollbar-gutter size, as showed in the repro example https://stackblitz.com/edit/qy7eyr-7mlpy8?file=src%2Fexample.tsx. @flora8984461 I'd suggest using a absolute positioned element for your app bar instead of fixed (or as an alternative you can add padding-right to the appbar when the drawer is opened, but this might cause some problems between browsers, you'll need to calculate scrollbar size)
Here's an example using position: absolute instead https://stackblitz.com/edit/qy7eyr-xijjvg?file=src%2Fexample.tsx
In the older version, the scrollbar white space will be taken up when the dialog / drawer shows. Is it still possible with the newer version? Thanks!
Maintaining the old behaviour would mean to regress the issues resolved on https://github.com/microsoft/fluentui/pull/31199 🥲. Keeping the gutter does introduce some regression on your case (since it doesn't support position: fixed), but removing it would introduce bugs on another, it's a hard choice ⚖️ . In your case there is an easy solution (position: absolute), while in the jump problem case the solution is a little more complex.
Let me know if that solves your use case 😁
@bsunderhus Thank you for the help!
Using position: absolute, the experience is somehow different from fixed. For example, if we scroll down, the header is still there (fixed) and scroll away (absolute). I made another sample which might work for our expected UX experience:
Make the container for all contents below the header as:
style={{
overflow: 'scroll',
position: 'absolute',
height: '100vh',
width: '100vw',
}}
Inspiration from viva insights web app 😄.
I still need to experiment this with our real app and discuss with the team about this layout change. Will let you know once I have more discussions.
Additionally, is it possible to expose an option to keep the older behavior?
Thank you! 🙏
Additionally, is it possible to expose an option to keep the older behavior?
This sounds dangerous to me @flora8984461 👀, as the old behaviour would not account for animation jumps. it's a delicate balance ⚖️.
If position: absolute is not a possibility in your case, I'd suggest keeping the position: fixed with some padding-right strategy to account for the gutter width. You can use our helper method useScrollbarWidth to measure how big the gutter will be while doing this calculations!
Thank you for the help! I will discuss this design with the team. @bsunderhus