UX: Improve positioning of controls in lightboxes (#13108)

This commit fixes an issue where controls scroll in lightboxes with large images (after zooming in)

Before:

05024730b3.mp4

Notice how controls like the close button, the next and previous button, and the image metadata also scroll? This is an undesired behavior.

After:

8047bab735.mp4

This is the desired behavior; only the image should scroll.

The changes in this PR apply to both desktop and mobile.

app/assets/stylesheets/common/base/magnific-popup.scss

@@ -623,6 +623,9 @@ button {
     overflow-y: auto !important;
     overflow-x: auto !important;
   }
+  .mfp-figure {
+    overflow: auto;
+  }
   .mfp-img {
     max-width: none;
   }