Fixes for Wishlist View

site/components/wishlist/WishlistCard/WishlistCard.module.css

@@ -1,21 +1,38 @@
 .root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
+  @apply relative grid sm:grid-cols-1 lg:grid-cols-12
+  w-full gap-6 px-3 py-6 border-b border-accent-2
+  transition duration-100 ease-in-out;
+}
 
-  &:nth-child(3n + 1) {
+.root:nth-child(3n + 1) .imageWrapper {
-    & .productBg {
+  @apply bg-violet;
-      @apply bg-violet;
+}
-    }
-  }
 
-  &:nth-child(3n + 2) {
+.root:nth-child(3n + 2) .imageWrapper {
-    & .productBg {
+  @apply bg-pink;
-      @apply bg-pink;
+}
-    }
-  }
 
-  &:nth-child(3n + 3) {
+.root:nth-child(3n + 3) .imageWrapper {
-    & .productBg {
+  @apply bg-blue;
-      @apply bg-blue;
+}
-    }
+
+.imageWrapper {
+  @apply col-span-3;
+  min-width: 230px;
+  width: 230px;
+  height: 230px;
+}
+
+.description {
+  @apply col-span-7 flex flex-col;
+}
+
+.actions {
+  @apply absolute bg-white p-6 top-0 right-4;
+}
+
+@media screen(lg) {
+  .actions {
+    @apply static col-span-2 flex flex-col justify-between space-y-4;
   }
 }

site/components/wishlist/WishlistCard/WishlistCard.tsx

@@ -63,41 +63,41 @@ const WishlistCard: FC<Props> = ({ item }) => {
 
   return (
     <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
-      <div className={`col-span-3 ${s.productBg}`}>
+      <div className={s.imageWrapper}>
-        <div>
+        <Image
-          <Image
+          width={230}
-            src={product.images[0]?.url || placeholderImg}
+          height={230}
-            width={400}
+          src={product.images[0]?.url || placeholderImg}
-            height={400}
+          alt={product.images[0]?.alt || 'Product Image'}
-            alt={product.images[0]?.alt || 'Product Image'}
+        />
-          />
-        </div>
       </div>
 
-      <div className="col-span-7">
+      <div className={s.description}>
-        <h3 className="text-2xl mb-2">
+        <div className="flex-1 mb-6">
-          <Link href={`/product${product.path}`}>
+          <h3 className="text-2xl mb-2 -mt-1">
-            <a>{product.name}</a>
+            <Link href={`/product${product.path}`}>
-          </Link>
+              <a>{product.name}</a>
-        </h3>
+            </Link>
-        <div className="mb-4">
+          </h3>
-          <Text html={product.description} />
+          <div className="mb-4">
+            <Text html={product.description} />
+          </div>
+        </div>
+        <div>
+          <Button
+            width={260}
+            aria-label="Add to Cart"
+            type="button"
+            onClick={addToCart}
+            loading={loading}
+          >
+            Add to Cart
+          </Button>
         </div>
-        <Button
-          aria-label="Add to Cart"
-          type="button"
-          className={
-            'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
-          }
-          onClick={addToCart}
-          loading={loading}
-        >
-          Add to Cart
-        </Button>
       </div>
-      <div className="col-span-2 flex flex-col justify-between">
+      <div className={s.actions}>
         <div className="flex justify-end font-bold">{price}</div>
-        <div className="flex justify-end">
+        <div className="flex justify-end mt-4 lg:mt-0">
           <button onClick={handleRemove}>
             <Trash />
           </button>

site/pages/wishlist.tsx

@@ -65,9 +65,9 @@ export default function Wishlist() {
               </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 ">
               {data &&
-                // @ts-ignore Shopify - Fix this types
+                // @ts-ignore - Wishlist Item Type
                 data.items?.map((item) => (
                   <WishlistCard key={item.id} item={item!} />
                 ))}