fix: Prevent content scrolling behind main menu (part 1) (#35173)

app/javascript/mastodon/containers/mastodon.jsx

@@ -18,6 +18,7 @@ import initialState, { title as siteTitle } from 'mastodon/initial_state';
 import { IntlProvider } from 'mastodon/locales';
 import { store } from 'mastodon/store';
 import { isProduction } from 'mastodon/utils/environment';
+import { BodyScrollLock } from 'mastodon/features/ui/components/body_scroll_lock';
 
 const title = isProduction() ? siteTitle : `${siteTitle} (Dev)`;
 
@@ -58,6 +59,7 @@ export default class Mastodon extends PureComponent {
                 <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
                   <Route path='/' component={UI} />
                 </ScrollContext>
+                <BodyScrollLock />
               </Router>
 
               <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />

app/javascript/mastodon/containers/media_container.jsx

@@ -14,7 +14,6 @@ import MediaModal from 'mastodon/features/ui/components/media_modal';
 import { Video } from 'mastodon/features/video';
 import { IntlProvider } from 'mastodon/locales';
 import { createPollFromServerJSON } from 'mastodon/models/poll';
-import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
 
 const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };
 
@@ -34,9 +33,6 @@ export default class MediaContainer extends PureComponent {
   };
 
   handleOpenMedia = (media, index, lang) => {
-    document.body.classList.add('with-modals--active');
-    document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
-
     this.setState({ media, index, lang });
   };
 
@@ -45,16 +41,10 @@ export default class MediaContainer extends PureComponent {
     const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props'));
     const mediaList = fromJS(media);
 
-    document.body.classList.add('with-modals--active');
-    document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
-
     this.setState({ media: mediaList, lang, options });
   };
 
   handleCloseMedia = () => {
-    document.body.classList.remove('with-modals--active');
-    document.documentElement.style.marginRight = '0';
-
     this.setState({
       media: null,
       index: null,