diff --git a/src/App.vue b/src/App.vue
index 719e00a4d7..d74535491f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
     :style="bgAppStyle"
   >
     <div
+      id="app_bg_wrapper"
       class="app-bg-wrapper"
       :style="bgStyle"
     />
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index ab5a36a58a..06ced5a1ac 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="showing"
+    v-body-scroll-lock="showing"
     class="modal-view media-modal-view"
     @click.prevent="hide"
   >
@@ -43,6 +44,10 @@
 .media-modal-view {
   z-index: 1001;
 
+  body:not(.scroll-locked) & {
+    display: none;
+  }
+
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;