From d4332542d172c7f05e10d806b44e6a3ea8bc295e Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 30 Nov 2025 10:50:41 +0300
Subject: [PATCH] cart: styles enhancements on different screen sizes

---
 .../OrderSummary/OrderSummary.module.css      | 32 ++---------------
 .../components/CartMobileTabletLayout.tsx     |  6 ++--
 .../youMayLike/YouMayAlsoLike.module.css      | 35 ++++++++++++++-----
 .../youMayLike/YouMightAlsoLike.tsx           | 18 ++++------
 src/pages/product/page.tsx                    |  4 +--
 src/pages/product/product.module.css          | 14 ++++++--
 6 files changed, 51 insertions(+), 58 deletions(-)

diff --git a/src/components/OrderSummary/OrderSummary.module.css b/src/components/OrderSummary/OrderSummary.module.css
index 676e5a0..5f1d411 100644
--- a/src/components/OrderSummary/OrderSummary.module.css
+++ b/src/components/OrderSummary/OrderSummary.module.css
@@ -66,12 +66,11 @@
 /* Tablet styles (769px - 1024px) */
 @media (min-width: 769px) and (max-width: 1024px) {
   .summaryRow {
-    padding: 6px 0;
     font-size: 16px;
   }
 
   .summaryDivider {
-    margin: 20px 0 !important;
+    margin: 10px 0 !important;
   }
 
   .totalRow {
@@ -82,12 +81,11 @@
 /* Desktop styles (1025px+) */
 @media (min-width: 1025px) {
   .summaryRow {
-    padding: 4px 0;
     font-size: 18px;
   }
 
   .summaryDivider {
-    margin: 0 !important;
+    margin: 10px 0 !important;
   }
 
   .totalRow {
@@ -101,29 +99,3 @@
     outline-offset: 4px;
   }
 }
-
-/* Reduced motion preferences */
-@media (prefers-reduced-motion: no-preference) {
-  .orderSummary {
-    animation: fadeInUp 0.8s ease-out;
-  }
-}
-
-/* Hover effects for devices that support hover */
-@media (hover: hover) {
-  .orderSummary:hover {
-    transform: translateY(-2px);
-  }
-
-  .menuItemImage:hover {
-    transform: scale(1.05);
-  }
-}
-
-/* Print styles */
-@media print {
-  .orderSummary {
-    box-shadow: none !important;
-    border: 1px solid #ccc !important;
-  }
-}
\ No newline at end of file
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index f9c50f4..c3c8f93 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -137,7 +137,7 @@ export default function CartMobileTabletLayout({
                       <Space
                         direction="vertical"
                         size="small"
-                        style={{ flex: 1, gap: isMobile ? "50px" : "60px" }}
+                        style={{ flex: 1, gap: isMobile ? 32 : isTablet ? 24 : 32 }}
                       >
                         <div>
                           <ProText
@@ -176,8 +176,8 @@ export default function CartMobileTabletLayout({
                               wordWrap: "break-word",
                               overflowWrap: "break-word",
                               lineHeight: "1.4",
-                              maxHeight: "2.8em",
-                              fontWeight: "500",
+                              maxHeight: isMobile ? "2.8em" : isTablet ? "4.8em" : "6.8em",
+                              fontWeight: 500,
                               letterSpacing: "0.01em",
                             }}
                           >
diff --git a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css b/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
index 27ab1eb..5163e78 100644
--- a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
+++ b/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);
diff --git a/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx b/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
index 9a84863..4cc2504 100644
--- a/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
+++ b/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,
                     }}
diff --git a/src/pages/product/page.tsx b/src/pages/product/page.tsx
index 7f6320c..4968195 100644
--- a/src/pages/product/page.tsx
+++ b/src/pages/product/page.tsx
@@ -29,7 +29,7 @@ export default function ProductDetailPage({
 
   const { isRTL } = useAppSelector((state) => state.locale);
   const { restaurant } = useAppSelector((state) => state.order);
-  const { isDesktop } = useBreakPoint();
+  const { isDesktop, isTablet } = useBreakPoint();
   const [quantity, setQuantity] = useState(1);
 
   // Get menu data
@@ -205,7 +205,7 @@ export default function ProductDetailPage({
                 key={`product-${product?.id}-${product?.image}`}
                 src={product?.image}
                 fallbackSrc={default_image}
-                height={isDesktop ? 300 : 240}
+                height={isDesktop || isTablet ? 300 : 240}
                 width={"100%"}
                 style={{
                   width: "100%",
diff --git a/src/pages/product/product.module.css b/src/pages/product/product.module.css
index 1f27ea5..4608104 100644
--- a/src/pages/product/product.module.css
+++ b/src/pages/product/product.module.css
@@ -219,8 +219,8 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 24px;
+  gap: 0px;
+  margin: 16px 0 24px 0;
 }
 
 .productDetails {
@@ -295,6 +295,16 @@
   }
 }
 
+@media (min-width: 769px) and (max-width: 1024px) {
+  .productHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+    margin: 24px 0;
+  }
+}
+
 .backButtonContainer {
   position: absolute;
   z-index: 999;