Styling Fixes

components/product/ProductSlider/ProductSlider.module.css

@@ -44,8 +44,9 @@
 
 .thumb {
   @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
-  inline-block cursor-pointer;
+  inline-block cursor-pointer h-full;
   width: 125px;
+  width: calc(100% / 3);
 }
 
 .thumb.selected {
@@ -73,18 +74,7 @@
   .album {
     height: 235px;
   }
-
-  .slider {
-    max-height: 700px;
-  }
-
   .thumb {
     width: 235px;
   }
 }
-
-@screen lg {
-  .slider {
-    max-height: 750px;
-  }
-}

components/product/ProductView/ProductView.module.css

@@ -77,4 +77,8 @@
   .sidebar {
     @apply col-span-4 py-12;
   }
+
+  .imageContainer {
+    height: 600px;
+  }
 }

components/product/ProductView/ProductView.tsx

@@ -10,7 +10,6 @@ import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text, useUI } from '@components/ui'
 import { useAddItem } from '@framework/cart'
 import Collapse from '@components/ui/Collapse'
-import Skeleton from '@components/ui/Skeleton'
 import ProductCard from '@components/product/ProductCard'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
@@ -111,7 +110,7 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             <WishlistButton
               className={s.wishlistButton}
               productId={product.id}
-              variant={product.variants[0]! as any}
+              variant={product.variants[0]}
             />
           )}
         </div>
@@ -186,15 +185,15 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
         <div className="grid grid-cols-4 py-3 gap-10">
           {relatedProducts.map((p) => (
             <div
-              className="animated fadeIn bg-accent-0 border border-accent-2"
               key={p.path}
+              className="animated fadeIn bg-accent-0 border border-accent-2"
             >
               <ProductCard
+                noNameTag
+                product={p}
                 key={p.path}
                 variant="simple"
-                className="animated fadeIn"
-                product={p}
-                noNameTag
+                className="animated fadeIn w-12"
                 imgProps={{
                   width: 275,
                   height: 275,
@@ -202,12 +201,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
               />
             </div>
           ))}
-          {/* {Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton
-              key={i}
-              className="w-full animated fadeIn bg-accent-0 border border-accent-3"
-            />
-          ))} */}
         </div>
       </section>
     </Container>