From 634ccf157d6a5c1b267648f8d4ae5b25caf02bd1 Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Mon, 25 Sep 2023 18:06:47 +0100
Subject: [PATCH] handle really large image captions

---
 src/components/LightBox/LightBox.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/LightBox/LightBox.tsx b/src/components/LightBox/LightBox.tsx
index 22695d8..d29c4d8 100644
--- a/src/components/LightBox/LightBox.tsx
+++ b/src/components/LightBox/LightBox.tsx
@@ -50,7 +50,7 @@ export const useLightBox = (): UseLightBoxReturnType => {
     const vh = window.innerHeight
 
     const maxWidth = isMobile ? vw - 32 : vw * 0.9375
-    const maxHeight = vh - 128
+    const maxHeight = vh - 160
 
     const rect = element.getBoundingClientRect()
 
@@ -226,7 +226,11 @@ const LightBoxCaption = styled.figcaption<{ isActive?: boolean }>`
     props.isActive &&
     `
     ${lsdUtils.typography('body1')}
-    z-index: 202; 
+    z-index: 202;
+
+    // The following will prevent very large captions from overflowing / being cut off.
+    height: 72px;
+    overflow: auto;
     `}
 
   // Edge case: when users are pinch zooming and press exit fullscreen - opacity will be 0.