From bcf16405871a80bb0af87a62c3c3fb37787b53f2 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 5 Oct 2021 13:28:32 -0400
Subject: [PATCH] Adds some padding around lightbox zooming

---
 stylesheets/components/Lightbox.scss | 20 ++++++++++++--------
 ts/components/Lightbox.tsx           |  4 +++-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index 9a7ea19c8f..1e17d8d92c 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -13,6 +13,10 @@
     right: 0;
     top: 0;
     z-index: 10;
+
+    &--zoom {
+      padding: 0;
+    }
   }
 
   &__main-container {
@@ -75,7 +79,7 @@
   &__shadow-container {
     display: flex;
     height: 100%;
-    padding: 0 16px;
+    padding: 0;
     position: absolute;
     width: 100%;
     visibility: hidden;
@@ -107,22 +111,22 @@
   &__shadow-container &__object {
     max-height: 200%;
     max-width: 200%;
-    padding: 0;
+    padding: 10%;
     visibility: hidden;
   }
 
+  &__object--container--zoom &__object {
+    max-height: 200%;
+    max-width: 200%;
+    padding: 10%;
+  }
+
   &__object--container--fill &__object {
     height: 100%;
     padding: 0;
     width: 100%;
   }
 
-  &__object--container--zoom &__object {
-    max-height: 200%;
-    max-width: 200%;
-    padding: 0;
-  }
-
   &__unsupported {
     @include button-reset;
     flex-grow: 1;
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 9ba381b47b..87a4ce263f 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -489,7 +489,9 @@ export function Lightbox({
   return root
     ? createPortal(
         <div
-          className="Lightbox Lightbox__container"
+          className={classNames('Lightbox Lightbox__container', {
+            'Lightbox__container--zoom': zoomType === ZoomType.ZoomAndPan,
+          })}
           onClick={(event: React.MouseEvent<HTMLDivElement>) => {
             event.stopPropagation();
             event.preventDefault();