From de80b9871ebe1497c672f3c7c7bb5467dabcb83a Mon Sep 17 00:00:00 2001
From: Ken D'Ambrosio <ken@jots.org>
Date: Thu, 14 May 2026 23:11:20 +0000
Subject: Fill viewport with media in lightbox and slideshow

Lightbox: .lb-media now fills the full stage (flex, 100%x100%) and
#lb-img/#lb-video use width/height:100% + object-fit:contain so at
least one axis always reaches the edge. Click-to-close updated to
check event.target===stage instead of stopPropagation.

Slideshow: #ss-img/#ss-video likewise changed from max-width/max-height
to width/height:100% so small or portrait media fills the stage.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 views/album.erb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'views')

diff --git a/views/album.erb b/views/album.erb
index 64bf763..d13ced9 100644
--- a/views/album.erb
+++ b/views/album.erb
@@ -83,8 +83,8 @@
 
 <div id="lightbox" class="lightbox hidden" role="dialog" aria-modal="true">
   <button class="lb-btn lb-close" onclick="closeLightbox()" aria-label="Close">✕</button>
-  <div class="lb-stage" onclick="closeLightbox()">
-    <div class="lb-media" onclick="event.stopPropagation()">
+  <div class="lb-stage" onclick="if(event.target===this)closeLightbox()">
+    <div class="lb-media">
       <img    id="lb-img"   src="" alt="" class="hidden">
       <video  id="lb-video" controls class="hidden"></video>
       <audio  id="lb-audio" controls class="hidden"></audio>
-- 
cgit v1.2.3