From 27ff51e7a1217848859b47940bc88caa6f1fb20f Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Fri, 30 Jan 2026 08:23:58 +0100
Subject: [PATCH] fix: use photo dimensions for mosaic aspect ratios (#146)

Thumbnails are generated as 300x300 squares, so CSS Columns alone
couldn't show varied aspect ratios. Now using the photo's width/height
metadata with CSS aspect-ratio property to force correct proportions.
---
 .../components/gallery/layouts/MosaicGalleryLayout.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
index 341abe49..00778e23 100644
--- a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
@@ -55,11 +55,17 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
   const [likedLocal, setLikedLocal] = React.useState(false);
   const canComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onQuickComment);
 
+  // Calculate aspect ratio from photo dimensions (fallback to 1 if unknown)
+  const aspectRatio = (photo.width && photo.height) ? photo.width / photo.height : 1;
+
   return (
     <>
       <div
         className="photo-card relative group cursor-pointer overflow-hidden rounded-lg bg-neutral-100 mb-2"
-        style={{ breakInside: 'avoid' }}
+        style={{
+          breakInside: 'avoid',
+          aspectRatio: aspectRatio.toString()
+        }}
         onClick={(e) => {
           e.stopPropagation();
           onClick(e);
@@ -68,7 +74,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
         <AuthenticatedImage
           src={photo.thumbnail_url || photo.url}
           alt={photo.filename}
-          className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
+          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
           loading="lazy"
           isGallery={true}
           protectFromDownload={!allowDownloads}