mark
/
msos
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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>
This commit is contained in:
popovskik 2026-08-27 16:36:38 +02:00
parent 9a9eec21c5
commit 1273edcb41
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/components/_lightbox.css
View File

@ -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;
}
}

3
main.js
View File

@ -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(); }