reslove github comments

app/product/[handle]/page.tsx

@@ -74,25 +74,27 @@ export default async function ProductPage({ params }: { params: { handle: string
   };
 
   return (
-    <div className="px-4">
+    <>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <div className="rounded-lg border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
-        <div className="lg:col-span-4">
-          <Gallery
-            images={product.images.map((image: Image) => ({
-              src: image.url,
-              altText: image.altText
-            }))}
-          />
-        </div>
+      <div className="px-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-8 px-4 dark:border-gray-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
+          <div className="lg:col-span-4">
+            <Gallery
+              images={product.images.map((image: Image) => ({
+                src: image.url,
+                altText: image.altText
+              }))}
+            />
+          </div>
 
-        <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
-          <ProductDescription product={product} />
+          <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
+            <ProductDescription product={product} />
+          </div>
         </div>
       </div>
       <Suspense>
@@ -101,7 +103,7 @@ export default async function ProductPage({ params }: { params: { handle: string
           <Footer />
         </Suspense>
       </Suspense>
-    </div>
+    </>
   );
 }
 

components/cart/add-to-cart.tsx

@@ -57,9 +57,10 @@ export function AddToCart({
         }
       )}
     >
-      <div className="absolute left-0 ml-4">{!isPending ? <PlusIcon className="h-5" /> : null}</div>
+      <div className="absolute left-0 ml-4">
+        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      </div>
       <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-      {isPending ? <LoadingDots className="bg-white" /> : null}
     </button>
   );
 }

components/product/gallery.tsx

@@ -21,7 +21,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
 
   return (
-    <div className="h-full">
+    <div className="mr-8 h-full">
       <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
         {images[currentImage] && (
           <Image
@@ -57,14 +57,14 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       </div>
 
       {images.length > 1 ? (
-        <div className="flex space-x-2">
+        <div className="flex space-x-2 overflow-auto">
           {images.map((image, index) => {
             const isActive = index === currentImage;
             return (
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className={clsx('h-auto w-1/6')}
+                className={clsx('h-auto w-20')}
                 onClick={() => setCurrentImage(index)}
               >
                 <GridTileImage