From 6ec46de0e7bb821ea4e4a7fc2318792b810c3f36 Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Sat, 20 Jun 2026 02:33:26 +0200
Subject: [PATCH] fix(slideshow): fill the viewport instead of black bars

The slide <img> used maxWidth/maxHeight:100% with no width/height, so it
rendered at the photo's intrinsic size (e.g. the 1920px preview) and never
scaled up to the projector, leaving black bars all around. Pin the image to
100% x 100% and use object-fit: cover so it fills the whole page.
---
 frontend/src/pages/gallery/SlideshowPage.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/gallery/SlideshowPage.tsx b/frontend/src/pages/gallery/SlideshowPage.tsx
index 2453684f..f7de1c9d 100644
--- a/frontend/src/pages/gallery/SlideshowPage.tsx
+++ b/frontend/src/pages/gallery/SlideshowPage.tsx
@@ -278,9 +278,13 @@ export function SlideshowPage() {
   const imgStyle = (buf: 0 | 1): React.CSSProperties => {
     const isActive = active === buf;
     const style: React.CSSProperties = {
-      maxWidth: '100%',
-      maxHeight: '100%',
-      objectFit: 'contain',
+      // Fill the whole viewport. `maxWidth/maxHeight` alone left the <img> at
+      // the photo's intrinsic size (e.g. the 1920px preview), so it never
+      // scaled up to the projector — leaving black bars all round. Pin to the
+      // full container and let object-fit do the scaling.
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
       filter: imageFilter(settings.colorfilter),
     };
     if (settings.transition === 'kenburns' && isActive) {