From 6421fabb02f9dca00af6fb331b358af13722c8df Mon Sep 17 00:00:00 2001 From: Joe Date: Fri, 21 May 2021 09:18:22 +0800 Subject: [PATCH] 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. --- app/assets/stylesheets/common/base/magnific-popup.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss index 0c2a9d5036..1f89e644bf 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; }