From f21f41c59d9c4d62423059fae98aa3d659b822b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Meyer?= <b.meyer@shopware.com>
Date: Thu, 13 Jul 2023 14:14:40 +0200
Subject: [PATCH] feat(poc): fix thumbnail gallery

---
 components/grid/tile.tsx       | 3 ++-
 components/product/gallery.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index b2f219276..3b6d7c2fa 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -41,7 +41,8 @@ export function GridTileImage({
       {props.src ? (
         <Image
           className={clsx('relative h-full w-full object-contain', {
-            'transition duration-300 ease-in-out hover:scale-105': isInteractive
+            'transition duration-300 ease-in-out hover:scale-105': isInteractive,
+            'm-4 max-h-[8rem] min-h-[8rem]': props.width === 200 && props.height === 200 // this styling is for the thumbnails below gallery on product detail page
           })}
           {...props}
           alt={props.title || ''}
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 12690d11e..92cd9432b 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -84,8 +84,8 @@ export function Gallery({
                 <GridTileImage
                   alt={image?.altText}
                   src={image.src}
-                  width={600}
-                  height={600}
+                  width={200}
+                  height={200}
                   background="purple-dark"
                   active={isActive}
                 />