From 5afac30d5a03e3d45a1862a545879e4a48f761cd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 21:04:38 +0000
Subject: [PATCH] Adjust gallery carousel to display images without side
 borders

Update the `SingleImageCarousel` component in `photo-gallery.tsx` to use `h-full` and `absolute inset-0` CSS properties, ensuring images fill the container without left/right borders.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3bb6adc4-7718-4ca1-af74-b7ec2f0e529a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true
---
 client/src/components/photo-gallery.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/photo-gallery.tsx b/client/src/components/photo-gallery.tsx
index 4c3a9ec..d8c4943 100644
--- a/client/src/components/photo-gallery.tsx
+++ b/client/src/components/photo-gallery.tsx
@@ -110,11 +110,11 @@ function SingleImageCarousel({
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
-      <div className="relative w-full aspect-[4/5] overflow-hidden rounded-b-lg">
+      <div className="relative w-full h-full overflow-hidden rounded-b-lg">
         <img
           src={images[index].large || images[index].thumb}
           alt={images[index].fileName}
-          className="w-full h-full object-cover transition-opacity duration-500"
+          className="absolute inset-0 w-full h-full object-cover transition-opacity duration-500"
           style={{ objectPosition: "center 25%" }}
           loading="lazy"
           data-testid="img-gallery-current"