fix cart items height

src/components/CartActionsButtons/CartActionsButtons.module.css

@@ -40,6 +40,7 @@
   box-shadow: none;
   font-size: 16px;
   font-weight: 600;
+  padding: 0;
 }
 
 .removeButton {

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,

src/components/Icons/DeleteIcon.tsx

@@ -6,20 +6,17 @@ interface DeleteIconType {
 const DeleteIcon = ({ className, onClick }: DeleteIconType) => {
   return (
     <svg
-      width="16"
+      width="12"
-      height="16"
+      height="12"
-      viewBox="0 0 16 16"
+      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"
+        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"
-        stroke="#FF6F59"
+        fill="#DC2626"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
       />
     </svg>
   );

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
+                      <Space direction="vertical" size="small">
-                        direction="vertical"
+                        <div
-                        size="small"
+                          style={{
-                        style={{ flex: 1, gap: isMobile ? 32 : isTablet ? 24 : 32 }}
+                            position: "absolute",
-                      >
+                            top: 0,
-                        <div>
+                            [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)?.optionsAR?.[0]
-                                : (item.variant as Variant)?.options?.[0]?.value}
+                                    ?.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",
+                            position: "absolute",
-                            flexDirection: "row",
+                            bottom: index !== items.length - 1 ? 16 : 6,
-                            justifyContent: "start",
+                            [isRTL ? "right" : "left"]: 0,
-                            gap: isMobile ? 20 : 24,
                           }}
                         >
-                          <ProText
+                          <ArabicPrice
-                            strong
+                            price={item.price}
-                            style={{
+                            style={{ fontStyle: "bold" }}
-                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                          />
-                            }}
-                          >
-                            <ArabicPrice price={item.price} />
-                          </ProText>
                         </div>
                       </Space>
                       <div style={{ position: "relative" }}>