From b2d4e8cd56214f0560733e82158666cd52080f0e Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Thu, 2 Nov 2023 00:04:14 -0700
Subject: [PATCH] Fix Lightbox video controls in small viewports

---
 stylesheets/components/Lightbox.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index 348b590f403b..5e021195c82e 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -105,6 +105,12 @@
       position: absolute;
       top: 0;
       width: 100%;
+
+      // Prevent nav buttons from overlapping video controls in small viewports
+      @media (max-height: 500px) {
+        inset-inline-start: 40px;
+        width: calc(100% - 80px);
+      }
     }
 
     height: auto;
@@ -192,12 +198,16 @@
     --height: 224px;
     position: absolute;
     top: calc(50% - var(--height) / 2);
-    width: 25%;
-    max-width: 96px;
     height: var(--height);
 
     // We need this so that the buttons stack above the container
     z-index: $z-index-above-base;
+
+    // Added extended click zone only when it wouldn't overlap video controls
+    @media (min-height: 500px) {
+      width: 25%;
+      max-width: 96px;
+    }
   }
 
   &__nav-next {