From 1273edcb41965c56cfaf8662ec22f26b3add229a Mon Sep 17 00:00:00 2001
From: popovskik <aleksandar.popovski@proxify.io>
Date: Thu, 27 Aug 2026 16:36:38 +0200
Subject: [PATCH] fix(lightbox mobile): stack caption/button under photo + hide
 Ask-MSOS pill

On phones the lightbox caption and "Read the story" button were pinned to the
screen bottom, cramped and overlapped by the floating "Ask MSOS" pill
(z-index above the lightbox). Now:
- lightbox becomes a centred column on <=600px: image -> button -> caption
  flow directly under the photo instead of being absolutely bottom-pinned;
- image capped at 62vh so tall/portrait photos leave room for the button;
- the Ask-MSOS pill is hidden while the viewer is open (body.lightbox-open),
  so it can no longer overlap the controls.
Desktop layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 css/components/_lightbox.css | 23 ++++++++++++++++++++---
 main.js                      |  3 +++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/css/components/_lightbox.css b/css/components/_lightbox.css
index a31e67e7..7d529e7c 100644
--- a/css/components/_lightbox.css
+++ b/css/components/_lightbox.css
@@ -73,16 +73,33 @@
 .lightbox-project:hover { background: #D9752E; transform: translateX(-50%) translateY(-1px); }
 .lightbox-project[hidden] { display: none; }
 
+/* While the viewer is open, hide the floating "Ask MSOS" pill so it can't
+   overlap the caption / "Read the story" button. */
+body.lightbox-open .msa-root { display: none !important; }
+
 @media (max-width: 700px) {
     .event-gallery { margin: 36px 0 8px; }
     .event-gallery-title { font-size: 19px; margin: 0 0 12px; }
     .event-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
 }
 @media (max-width: 600px) {
-    .lightbox { padding: 12px; }
-    .lightbox-img { max-width: 96vw; max-height: 80vh; }
+    /* Stack image -> "Read the story" -> caption in a centred column so the
+       button and caption sit directly under the photo instead of pinned to the
+       screen bottom (where they were cramped and clashed with the pill). The
+       reduced image height guarantees room below even for tall/portrait photos. */
+    .lightbox { padding: 12px; flex-direction: column; justify-content: center; gap: 14px; }
+    .lightbox-img { max-width: 96vw; max-height: 62vh; }
     .lightbox-prev { left: 8px; }
     .lightbox-next { right: 8px; }
     .lightbox-close { top: 12px; right: 12px; }
-    .lightbox-caption { font-size: 12.5px; bottom: 12px; }
+    .lightbox-project {
+        position: static; transform: none; left: auto; bottom: auto;
+        margin: 0; flex: 0 0 auto;
+    }
+    .lightbox-project:hover { transform: none; }
+    .lightbox-caption {
+        position: static; left: auto; right: auto; bottom: auto;
+        flex: 0 0 auto; max-width: 92vw; margin: 0 auto;
+        font-size: 12.5px;
+    }
 }
diff --git a/main.js b/main.js
index ee4a5d62..984ce260 100644
--- a/main.js
+++ b/main.js
@@ -907,11 +907,14 @@ document.addEventListener('DOMContentLoaded', function() {
             lb.classList.add('is-open');
             lb.setAttribute('aria-hidden', 'false');
             document.documentElement.style.overflow = 'hidden';
+            // hide the floating "Ask MSOS" pill so it doesn't overlap the viewer
+            document.body.classList.add('lightbox-open');
         }
         function close() {
             lb.classList.remove('is-open');
             lb.setAttribute('aria-hidden', 'true');
             document.documentElement.style.overflow = '';
+            document.body.classList.remove('lightbox-open');
             img.setAttribute('src', '');
         }
         function step(d) { idx = (idx + d + group.length) % group.length; render(); }