[Modal] RTL - Scrollbar and padding issue

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 🌎

Start by reproducing the RTL case from the linked CodeSandbox, then inspect the ModalManager entry point mentioned in the issue. Verify the behavior with a scrollable body and an opened modal; done means RTL no longer causes a visible content shift while LTR behavior remains unchanged.