From 8d5351d82ba6cc85175a0ca2425107d7ea722581 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 16 Dec 2025 00:57:49 +0300
Subject: [PATCH] fix cart items height

---
 .../CartActionsButtons.module.css             |  1 +
 .../CartActionsButtons/CartActionsButtons.tsx |  2 +-
 src/components/Icons/DeleteIcon.tsx           | 13 ++---
 .../components/CartMobileTabletLayout.tsx     | 48 ++++++++++---------
 4 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/components/CartActionsButtons/CartActionsButtons.module.css b/src/components/CartActionsButtons/CartActionsButtons.module.css
index a8ba14b..f42ba7e 100644
--- a/src/components/CartActionsButtons/CartActionsButtons.module.css
+++ b/src/components/CartActionsButtons/CartActionsButtons.module.css
@@ -40,6 +40,7 @@
   box-shadow: none;
   font-size: 16px;
   font-weight: 600;
+  padding: 0;
 }
 
 .removeButton {
diff --git a/src/components/CartActionsButtons/CartActionsButtons.tsx b/src/components/CartActionsButtons/CartActionsButtons.tsx
index 44c6fd9..e86fbc1 100644
--- a/src/components/CartActionsButtons/CartActionsButtons.tsx
+++ b/src/components/CartActionsButtons/CartActionsButtons.tsx
@@ -109,7 +109,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
             min={1}
             max={100}
             value={item.quantity || 1}
-            onChange={(value) =>
+            onChange={(value: number) =>
               dispatch(
                 updateQuantity({
                   id: item.id,
diff --git a/src/components/Icons/DeleteIcon.tsx b/src/components/Icons/DeleteIcon.tsx
index f7d02ab..9fcc4d6 100644
--- a/src/components/Icons/DeleteIcon.tsx
+++ b/src/components/Icons/DeleteIcon.tsx
@@ -6,20 +6,17 @@ interface DeleteIconType {
 const DeleteIcon = ({ className, onClick }: DeleteIconType) => {
   return (
     <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       onClick={onClick}
     >
       <path
-        d="M6 2H10M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4M6.66667 7V10.3333M9.33333 7V10.3333"
-        stroke="#FF6F59"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        d="M3 2.4V0.6C3 0.44087 3.06321 0.288258 3.17574 0.175736C3.28826 0.0632141 3.44087 0 3.6 0H8.4C8.55913 0 8.71174 0.0632141 8.82426 0.175736C8.93679 0.288258 9 0.44087 9 0.6V2.4H12V3.6H10.8V11.4C10.8 11.5591 10.7368 11.7117 10.6243 11.8243C10.5117 11.9368 10.3591 12 10.2 12H1.8C1.64087 12 1.48826 11.9368 1.37574 11.8243C1.26321 11.7117 1.2 11.5591 1.2 11.4V3.6H0V2.4H3ZM6.8484 7.2L7.9092 6.1392L7.0608 5.2908L6 6.3516L4.9392 5.2908L4.0908 6.1392L5.1516 7.2L4.0908 8.2608L4.9392 9.1092L6 8.0484L7.0608 9.1092L7.9092 8.2608L6.8484 7.2ZM4.2 1.2V2.4H7.8V1.2H4.2Z"
+        fill="#DC2626"
       />
     </svg>
   );
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index c3c8f93..32237ed 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -124,7 +124,7 @@ export default function CartMobileTabletLayout({
                   <Divider style={{ margin: "0px 0px 10px 0px" }} />
                 )}
                 {items.map((item, index) => (
-                  <div key={index}>
+                  <div key={index} style={{ position: "relative" }}>
                     <Space
                       size="middle"
                       style={{
@@ -134,12 +134,14 @@ export default function CartMobileTabletLayout({
                         height: "100%",
                       }}
                     >
-                      <Space
-                        direction="vertical"
-                        size="small"
-                        style={{ flex: 1, gap: isMobile ? 32 : isTablet ? 24 : 32 }}
-                      >
-                        <div>
+                      <Space direction="vertical" size="small">
+                        <div
+                          style={{
+                            position: "absolute",
+                            top: 0,
+                            [isRTL ? "right" : "left"]: 0,
+                          }}
+                        >
                           <ProText
                             style={{
                               margin: 0,
@@ -155,8 +157,10 @@ export default function CartMobileTabletLayout({
                               }}
                             >
                               {isRTL
-                                ? (item.variant as Variant)?.optionsAR?.[0]?.value
-                                : (item.variant as Variant)?.options?.[0]?.value}
+                                ? (item.variant as Variant)?.optionsAR?.[0]
+                                    ?.value
+                                : (item.variant as Variant)?.options?.[0]
+                                    ?.value}
                             </span>
                           </ProText>
                           <br />
@@ -176,9 +180,14 @@ export default function CartMobileTabletLayout({
                               wordWrap: "break-word",
                               overflowWrap: "break-word",
                               lineHeight: "1.4",
-                              maxHeight: isMobile ? "2.8em" : isTablet ? "4.8em" : "6.8em",
+                              maxHeight: isMobile
+                                ? "2.8em"
+                                : isTablet
+                                  ? "4.8em"
+                                  : "6.8em",
                               fontWeight: 500,
                               letterSpacing: "0.01em",
+                              width: "65%",
                             }}
                           >
                             {item.description}
@@ -186,20 +195,15 @@ export default function CartMobileTabletLayout({
                         </div>
                         <div
                           style={{
-                            display: "flex",
-                            flexDirection: "row",
-                            justifyContent: "start",
-                            gap: isMobile ? 20 : 24,
+                            position: "absolute",
+                            bottom: index !== items.length - 1 ? 16 : 6,
+                            [isRTL ? "right" : "left"]: 0,
                           }}
                         >
-                          <ProText
-                            strong
-                            style={{
-                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
-                            }}
-                          >
-                            <ArabicPrice price={item.price} />
-                          </ProText>
+                          <ArabicPrice
+                            price={item.price}
+                            style={{ fontStyle: "bold" }}
+                          />
                         </div>
                       </Space>
                       <div style={{ position: "relative" }}>