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) {
-    & .productBg {
+.root:nth-child(3n + 1) .imageWrapper {
   @apply bg-violet;
-    }
-  }
+}
 
-  &:nth-child(3n + 2) {
-    & .productBg {
+.root:nth-child(3n + 2) .imageWrapper {
   @apply bg-pink;
-    }
-  }
+}
 
-  &:nth-child(3n + 3) {
-    & .productBg {
+.root:nth-child(3n + 3) .imageWrapper {
   @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,19 +63,18 @@ 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>
+      <div className={s.imageWrapper}>
         <Image
+          width={230}
+          height={230}
           src={product.images[0]?.url || placeholderImg}
-            width={400}
-            height={400}
           alt={product.images[0]?.alt || 'Product Image'}
         />
       </div>
-      </div>
 
-      <div className="col-span-7">
-        <h3 className="text-2xl mb-2">
+      <div className={s.description}>
+        <div className="flex-1 mb-6">
+          <h3 className="text-2xl mb-2 -mt-1">
             <Link href={`/product${product.path}`}>
               <a>{product.name}</a>
             </Link>
@@ -83,21 +82,22 @@ const WishlistCard: FC<Props> = ({ item }) => {
           <div className="mb-4">
             <Text html={product.description} />
           </div>
+        </div>
+        <div>
           <Button
+            width={260}
             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>
+      <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!} />
                 ))}