From b38590a4ace339bc0717e37fbfa113136d75f786 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 1 Feb 2022 18:49:36 -0500
Subject: [PATCH] Lightbox: Fix clicks outside of zoomable area

---
 stylesheets/components/Lightbox.scss |  6 ++++
 ts/components/Lightbox.tsx           | 46 +++++++++++++++-------------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index 5b3134d14638..4dd3a2201c7c 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -129,6 +129,12 @@
     }
   }
 
+  &__zoomable-container {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
   &__zoom-button {
     @include button-reset;
     cursor: zoom-in;
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 6631e6a77f7e..d57722f27716 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -427,28 +427,30 @@ export function Lightbox({
     if (isImageTypeSupported) {
       if (objectURL) {
         content = (
-          <button
-            className="Lightbox__zoom-button"
-            onClick={zoomButtonHandler}
-            type="button"
-          >
-            <img
-              alt={i18n('lightboxImageAlt')}
-              className="Lightbox__object"
-              onContextMenu={(ev: React.MouseEvent<HTMLImageElement>) => {
-                // These are the only image types supported by Electron's NativeImage
-                if (
-                  ev &&
-                  contentType !== IMAGE_PNG &&
-                  !/image\/jpe?g/g.test(contentType)
-                ) {
-                  ev.preventDefault();
-                }
-              }}
-              src={objectURL}
-              ref={imageRef}
-            />
-          </button>
+          <div className="Lightbox__zoomable-container">
+            <button
+              className="Lightbox__zoom-button"
+              onClick={zoomButtonHandler}
+              type="button"
+            >
+              <img
+                alt={i18n('lightboxImageAlt')}
+                className="Lightbox__object"
+                onContextMenu={(ev: React.MouseEvent<HTMLImageElement>) => {
+                  // These are the only image types supported by Electron's NativeImage
+                  if (
+                    ev &&
+                    contentType !== IMAGE_PNG &&
+                    !/image\/jpe?g/g.test(contentType)
+                  ) {
+                    ev.preventDefault();
+                  }
+                }}
+                src={objectURL}
+                ref={imageRef}
+              />
+            </button>
+          </div>
         );
       } else {
         content = (