[Modal] RTL - Scrollbar and padding issue

[orest22]

The issue is about padding being added to the right side of the body instead left side for RTL.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When modal opens in RTL (direction="rtl") there is visible content shift. It's not happening for the LTR because padding-right compensates it.

Expected Behavior 🤔

In RTL mode padding-left has to be set instead.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-forked-uklog?file=/index.js

Had an issue with the official template. I don't think it's somehow related to the styling rather the problem is in ModalManager that sets padding on the body

Steps:

1. Configure RTL as per https://material-ui.com/guides/right-to-left/#right-to-left
2. Make sure body has a scroll
3. Create modal
4. Validate the issue

Context 🔦

I am building an accessible app that requires RTL support and discover this issue.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	17
Browser	Chrome
TypeScript	N/A
etc.

[orest22]

I understand that it's related to the v4 but I think the issue will still exist in v5. Any workaround is welcome! Thanks!

[oliviertassinari]

Could you test it on v5? Also, did you look into a solution? RTL is 2% of the usage of the library, it's not a high priority for us.

[orest22]

@oliviertassinari Hey, thanks for the quick reply, Issue is here https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Modal/ModalManager.ts#L61.

Padding can be determined based on dir attr of the body?

I will try v5 but as I mentioned there is some issue with codesandbox template.
Also, I will be interested in fixing this issue if there is no workaround. I have also tried to use
onEntering, onExit but in the case with Menu drop-down gets shifted because the position gets calculated before I am applying padding and onEnter is too soon.

[oliviertassinari]

I can't reproduce the issue you are referring to. Do you have an illustration?

[orest22]

1. Initial state

2. Opened

3. You can notice RTL scroll bar is on the left (Not sure why in your case it's on the right)
   

[oliviertassinari]

I see, your scrollbar is in the opposite side (at the end). Is this the most common behavior? I guess I would need to change my whole OS language to see this.

[orest22]

Looks like chrome flips the main scroll only when the OS language is different or something like that. But other scrolls are flipped properly. That what I see based on codesandbox if it's in the project view scroll bar is on the left because the preview is an iframe. But if you open the project in a new window scrollbar is on the right.