From 175b5e8589e3d66c22422366e9b8f0ad40939c60 Mon Sep 17 00:00:00 2001
From: Samantha Kellow <sammii.h@icloud.com>
Date: Thu, 23 Nov 2023 16:35:31 +0000
Subject: [PATCH] amending gallery styling

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

diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index fb6bd636a..77c62cca4 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -31,7 +31,7 @@ export function GridTileImage({
       {props.src ? (
         // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
         <Image
-          className={clsx('relative h-full w-full object-contain', {
+          className={clsx('relative h-full w-full object-cover', {
             'transition duration-300 ease-in-out hover:scale-105': isInteractive
           })}
           {...props}
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 8636a1cc9..efe6803bd 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -24,7 +24,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
         {images[currentImageIndex] && (
           <Image
-            className="relative h-full w-full object-contain"
+            className="relative h-full w-full object-cover"
             height={600}
             width={600}
             alt={images[currentImageIndex]?.altText as string}
@@ -34,8 +34,8 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
         )}
 
         {images.length > 1 ? (
-          <div className="absolute bottom-[15%] flex w-full justify-center">
-            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
+          <div className="absolute bottom-2 flex w-full justify-center">
+            <div className="mx-auto flex h-8 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
               <button
                 aria-label="Previous product image"
                 onClick={() => handleNavigate('previous')}
@@ -64,14 +64,14 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className="h-auto w-20"
+                className="h-20 w-20"
                 onClick={() => setCurrentImageIndex(index)}
               >
                 <GridTileImage
                   alt={image.altText}
                   src={image.src}
-                  width={600}
-                  height={600}
+                  width={50}
+                  height={50}
                   active={isActive}
                 />
               </button>