Adds some padding around lightbox zooming

Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>
signalapp · Oct 5, 2021 · 4a825aa · 4a825aa
1 parent 8adea03
commit 4a825aa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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,20 +111,20 @@
   &__shadow-container &__object {
     max-height: 200%;
     max-width: 200%;
-    padding: 0;
+    padding: 10%;
     visibility: hidden;
   }
 
-  &__object--container--fill &__object {
-    height: 100%;
-    padding: 0;
-    width: 100%;
-  }
-
   &__object--container--zoom &__object {
     max-height: 200%;
     max-width: 200%;
+    padding: 10%;
+  }
+
+  &__object--container--fill &__object {
+    height: 100%;
     padding: 0;
+    width: 100%;
   }
 
   &__unsupported {

diff --git 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();