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)



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



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: