From 7f00b66eb78aaaf820dae1327e76692a3aa9b7fe Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Mon, 30 Mar 2026 21:08:50 +1100
Subject: [PATCH] ImageGallery: landscape thumbnails (4:3 ratio)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Thumbnails now 4:3 aspect ratio instead of square
- Renamed thumbnailSize → thumbnailHeight, width calculated from ratio
- Default 64px height × 85px width

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../molecules/ImageGallery/ImageGallery.stories.tsx   |  2 +-
 .../molecules/ImageGallery/ImageGallery.tsx           | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/molecules/ImageGallery/ImageGallery.stories.tsx b/src/components/molecules/ImageGallery/ImageGallery.stories.tsx
index 8d497bf..60f77d1 100644
--- a/src/components/molecules/ImageGallery/ImageGallery.stories.tsx
+++ b/src/components/molecules/ImageGallery/ImageGallery.stories.tsx
@@ -71,6 +71,6 @@ export const CustomSizes: Story = {
   args: {
     images: venueImages,
     heroHeight: 300,
-    thumbnailSize: 56,
+    thumbnailHeight: 48,
   },
 };
diff --git a/src/components/molecules/ImageGallery/ImageGallery.tsx b/src/components/molecules/ImageGallery/ImageGallery.tsx
index 7ac1db8..f6be8e4 100644
--- a/src/components/molecules/ImageGallery/ImageGallery.tsx
+++ b/src/components/molecules/ImageGallery/ImageGallery.tsx
@@ -18,8 +18,8 @@ export interface ImageGalleryProps {
   images: GalleryImage[];
   /** Height of the hero image area */
   heroHeight?: number | { xs?: number; sm?: number; md?: number; lg?: number };
-  /** Height of each thumbnail */
-  thumbnailSize?: number;
+  /** Height of each thumbnail (width is 4:3 ratio) */
+  thumbnailHeight?: number;
   /** MUI sx prop for style overrides */
   sx?: SxProps<Theme>;
 }
@@ -47,7 +47,8 @@ export interface ImageGalleryProps {
  * ```
  */
 export const ImageGallery = React.forwardRef<HTMLDivElement, ImageGalleryProps>(
-  ({ images, heroHeight = { xs: 280, md: 420 }, thumbnailSize = 72, sx }, ref) => {
+  ({ images, heroHeight = { xs: 280, md: 420 }, thumbnailHeight = 64, sx }, ref) => {
+    const thumbnailWidth = Math.round(thumbnailHeight * (4 / 3));
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [hoverIndex, setHoverIndex] = React.useState<number | null>(null);
 
@@ -123,8 +124,8 @@ export const ImageGallery = React.forwardRef<HTMLDivElement, ImageGalleryProps>(
               onMouseEnter={() => setHoverIndex(index)}
               onMouseLeave={() => setHoverIndex(null)}
               sx={{
-                width: thumbnailSize,
-                height: thumbnailSize,
+                width: thumbnailWidth,
+                height: thumbnailHeight,
                 flexShrink: 0,
                 borderRadius: 1,
                 backgroundImage: `url(${image.src})`,