From 5c3e03535abc8a4c2319efeb65c4cf9dc82caaf0 Mon Sep 17 00:00:00 2001
From: Arman <arman.kumaraswamy@gmail.com>
Date: Fri, 18 Oct 2024 17:04:12 -0400
Subject: [PATCH] Made cart items responsive for mobile

---
 src/app/order/dynamic.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/app/order/dynamic.tsx b/src/app/order/dynamic.tsx
index a532068..cdd9fc3 100644
--- a/src/app/order/dynamic.tsx
+++ b/src/app/order/dynamic.tsx
@@ -51,19 +51,23 @@ function CartItem({ product }: { product: CartItem }) {
           </div>
           <div className="flex-grow">
             <h2 className="font-semibold">{product.name}</h2>
-            <p>{product.description}</p>
+            <p className="text-sm md:text-base">{product.description}</p>
           </div>
         </div>
       </Link>
       <div className="flex items-center justify-center space-x-10">
-        <p>{product.quantity}</p>
-        <div className="min-w-24">
-          <p>${product.price} each</p>
-        </div>
-        <div className="min-w-24">
-          <p className="font-semibold">
-            ${Number(product.price) * product.quantity}
-          </p>
+        <div className="flex flex-col-reverse md:flex-row md:gap-4">
+          <p>{product.quantity}</p>
+          <div className="flex md:block">
+            <div className="min-w-8 text-sm md:min-w-24 md:text-base">
+              <p>${product.price} each</p>
+            </div>
+          </div>
+          <div className="min-w-24">
+            <p className="font-semibold">
+              ${Number(product.price) * product.quantity}
+            </p>
+          </div>
         </div>
         <form action={removeFromCart}>
           <button type="submit">