cart: styles enhancements on different screen sizes

src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css

@@ -56,14 +56,38 @@
     outline-offset: 4px;
   }
   .youMightAlsoLikeContainer {
-    height: 150px !important;
+    height: 160px !important;
+  }
+
+  .itemDescriptionIconsContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    margin-top: 10px;
+    margin-left: -10px;
   }
 }
 
 @media (min-width: 768px) and (max-width: 1024px) {
   .youMightAlsoLikeContainer {
-    height: 200px !important;
+    height: 210px !important;
   }
+
+  .itemDescriptionIconsContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    margin-top: 10px;
+    margin-right: 0;
+    margin-left: -15px;
+  }
+
+  :global(.ant-app-rtl) .itemDescriptionIconsContainer {
+    margin-right: -30px;
+    margin-left: 0;
+  }
+
+
 }
 
 @media (min-width: 1024px) {
@@ -75,13 +99,6 @@
   }
 }
 
-/* Hover effects for devices that support hover */
-@media (hover: hover) {
-  .popularMenuItemImage:hover {
-    transform: scale(1.05);
-  }
-}
-
 /* Focus states for accessibility */
 .popularMenuItemImage:focus {
   outline: 2px solid var(--primary);

src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx

@@ -119,7 +119,7 @@ export default function YouMightAlsoLike() {
 
   return (
     <>
-      <div className={styles.youMightAlsoLikeTitle} >
+      <div className={styles.youMightAlsoLikeTitle}>
         <ProText
           strong
           style={{
@@ -201,9 +201,9 @@ export default function YouMightAlsoLike() {
                     width: isMobile ? 18 : 24,
                     height: isMobile ? 18 : 24,
                     borderRadius: "50%",
-                    top: isMobile ? 50 : 80,
+                    top: isMobile ? 50 : isTablet ? 60 : 80,
                     position: "absolute",
-                    [isRTL ? "left" : "right"]: isMobile ? 15 : 20,
+                    [isRTL ? "right" : "left"]: isMobile ? 15 : 20,
                     display: "flex",
                     flexDirection: "row",
                     justifyContent: "center",
@@ -240,13 +240,7 @@ export default function YouMightAlsoLike() {
                 />
 
                 <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "start",
-                    marginTop: 5,
-                    ...(isRTL ? { marginRight: -20 } : { marginLeft: -10 }),
-                  }}
+                  className={styles.itemDescriptionIconsContainer}
                 >
                   <ItemDescriptionIcons
                     className={styles.itemDescriptionIcons}
@@ -267,7 +261,7 @@ export default function YouMightAlsoLike() {
                         whiteSpace: "nowrap",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
-                        padding: 3,
+                        padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
                         fontSize: isMobile ? 12 : isTablet ? 14 : 16,
                         width: isMobile ? 80 : isTablet ? 100 : 120,
                         display: "inline-block",
@@ -286,7 +280,7 @@ export default function YouMightAlsoLike() {
                       WebkitBoxOrient: "vertical",
                       overflow: "hidden",
                       textOverflow: "ellipsis",
-                      padding: 3,
+                      padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
                       fontSize: isMobile ? 12 : isTablet ? 14 : 16,
                       fontWeight: 500,
                     }}