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>

1 files changed, 5 insertions, 9 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; }
 }