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

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:

https://d11a6trkgmumsb.cloudfront.net/original/3X/0/5/05024730b3b877c472dff5f4d63155121d370297.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:

https://d11a6trkgmumsb.cloudfront.net/original/3X/8/0/8047bab7351831e9b9df8c3cf0eb368c7529ae8a.mp4

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

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

diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index 0c2a9d5..1f89e64 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/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;
   }

GitHub sha: 6421fabb

This commit appears in #13108 which was approved by martin. It was merged by hnb-ku.

This commit has been mentioned on Discourse Meta. There might be relevant details there: