From a02fdc9049f74603aee020fa79788d0027745aa6 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Tue, 2 May 2023 06:54:01 -0700
Subject: [PATCH] Make lightbox buttons smaller

---
 stylesheets/components/Lightbox.scss | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index 448288aa9158..a17072c8ab54 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -189,13 +189,12 @@
 
   &__nav-next,
   &__nav-prev {
+    --height: 224px;
     position: absolute;
-    top: 0;
-    display: flex;
-    flex-direction: column;
+    top: calc(50% - var(--height) / 2);
     width: 25%;
-    height: 100%;
-    justify-content: center;
+    max-width: 96px;
+    height: var(--height);
 
     // We need this so that the buttons stack above the container
     z-index: $z-index-above-base;
@@ -332,8 +331,6 @@
     &--next {
       width: 100%;
       height: 100%;
-      max-width: 96px;
-      max-height: 224px;
       opacity: 0;
       transition: opacity 200ms ease-in-out;