From 295b3cdb96ebeaef7bc5f2bbe02da24368a124e7 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 8 Oct 2025 20:22:48 +0300
Subject: [PATCH] cart: enhance "you may like" styles

---
 src/pages/cart/cart.module.css                | 22 ++-----------------
 .../cart/components/CartDesktopLayout.tsx     |  6 ++---
 .../youMayLike/YouMayAlsoLike.module.css      |  4 +---
 .../youMayLike/YouMightAlsoLike.tsx           |  6 ++---
 4 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css
index 2c31b08..ffb6915 100644
--- a/src/pages/cart/cart.module.css
+++ b/src/pages/cart/cart.module.css
@@ -514,29 +514,11 @@
     outline-offset: 4px;
   }
 
-  .responsive-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: 16px;
-    overflow-x: visible;
-  }
 }
 
-/* Extra large screens (min-width: 1024px) */
-@media (min-width: 1024px) {
-  .responsive-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 20px;
-  }
-}
 
-/* Large desktop screens (min-width: 1280px) */
-@media (min-width: 1280px) {
-  .responsive-grid {
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 24px;
-  }
-}
+
+
 
 /* Extra large desktop screens (min-width: 1440px) */
 @media (min-width: 1440px) {
diff --git a/src/pages/cart/components/CartDesktopLayout.tsx b/src/pages/cart/components/CartDesktopLayout.tsx
index 1b64589..95caf56 100644
--- a/src/pages/cart/components/CartDesktopLayout.tsx
+++ b/src/pages/cart/components/CartDesktopLayout.tsx
@@ -31,9 +31,9 @@ export default function CartDesktopLayout() {
   return (
     <>
       <div className={`${styles.cartContainer} ${styles.desktopCartContainer}`}>
-        <Row gutter={[40, 40]} style={{ width: "100%" }}>
+        <Row gutter={40} style={{ width: "100%" }}>
           {/* Main Content Column */}
-          <Col xs={24} lg={16} xl={17}>
+          <Col xs={24} lg={14} xl={16}>
             <div className={styles.desktopMainContent}>
               {/* <div className={styles.desktopRecommendationsSection}>
                   <YouMightAlsoLike />
@@ -168,7 +168,7 @@ export default function CartDesktopLayout() {
           </Col>
 
           {/* Sidebar Column */}
-          <Col xs={24} lg={8} xl={7}>
+          <Col xs={24} lg={10} xl={8}>
             <div className={styles.desktopSidebar}>
               <YouMightAlsoLike />
 
diff --git a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css b/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
index 80c290c..b420998 100644
--- a/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
+++ b/src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
@@ -2,9 +2,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: 100%;
-    overflow: auto;
-    scrollbar-width: none;
+    overflow-y: scroll;
 }
 
 :global(.darkApp) .youMightAlsoLikeContainer path {
diff --git a/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx b/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
index 80849d0..488d09f 100644
--- a/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
+++ b/src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
@@ -40,7 +40,7 @@ export default function YouMightAlsoLike() {
 
   return (
     <>
-      <div style={{ marginBottom: 16 }}>
+      <div style={{ margin: 16 }}>
         <ProText
           strong
           style={{
@@ -51,7 +51,7 @@ export default function YouMightAlsoLike() {
         </ProText>
       </div>
 
-      <div className={`${styles.youMightAlsoLikeContainer} responsive-grid`}>
+      <div className={styles.youMightAlsoLikeContainer}>
         {menuItems.map((item: Product) => (
           <div key={item.id}>
             <div
@@ -62,7 +62,7 @@ export default function YouMightAlsoLike() {
                 justifyContent: "space-between",
                 width: isMobile ? "95px" : isTablet ? "120px" : "140px",
                 position: "relative",
-                height: 155,
+                height: 200,
                 overflow: "hidden",
               }}
             >