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>
---
 public/css/style.css | 14 +++++---------
 views/album.erb      |  4 ++--
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 062b187..059d340 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -173,20 +173,17 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
   flex: 1;
   display: flex; align-items: center; justify-content: center;
   width: 100%;
-  cursor: zoom-out;
   overflow: hidden;
-  padding: 16px;
 }
-/* inline-block shrink-wraps to the rendered image size;
-   arrows inside are then anchored to the photo's actual edges */
 .lb-media {
   position: relative;
-  display: inline-block;
+  width: 100%; height: 100%;
+  display: flex; align-items: center; justify-content: center;
   line-height: 0;
   cursor: default;
 }
-#lb-img   { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); object-fit: contain; display: block; }
-#lb-video { max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); display: block; }
+#lb-img   { width: 100%; height: 100%; object-fit: contain; display: block; }
+#lb-video { width: 100%; height: 100%; display: block; }
 #lb-audio { width: 400px; max-width: 90vw; display: block; }
 
 .lb-info {
@@ -264,7 +261,7 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
   position: relative;
 }
 #ss-img, #ss-video {
-  max-width: 100%; max-height: 100%;
+  width: 100%; height: 100%;
   object-fit: contain;
   opacity: 1;
   transition: opacity .5s ease;
@@ -375,7 +372,6 @@ legend { padding: 0 8px; color: var(--text-dim); font-size: .85rem; }
   main { padding: 12px; }
   .lb-prev { left: 4px; }
   .lb-next { right: 4px; }
-  .lb-stage { padding: 48px 40px; }
   .files-table { font-size: .78rem; }
 }
 
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