From b19b5b6ee21269656481d853e14c53d24a21d16f Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 16 Nov 2025 15:33:01 +0300
Subject: [PATCH] cart: adjust layout

---
 src/components/ProHeader/ProHeader.tsx               |  9 ++++++---
 src/pages/cart/cart.module.css                       |  1 -
 src/pages/cart/components/CartMobileTabletLayout.tsx | 12 +++++-------
 src/pages/cart/components/cartFooter/CartFooter.tsx  |  6 +++---
 .../cart/components/cartFooter/footer.module.css     |  2 +-
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/ProHeader/ProHeader.tsx b/src/components/ProHeader/ProHeader.tsx
index c98f57c..fe8563f 100644
--- a/src/components/ProHeader/ProHeader.tsx
+++ b/src/components/ProHeader/ProHeader.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from "antd";
+import { Button, Typography, Layout } from "antd";
 import BackIcon from "components/Icons/BackIcon";
 import { FunctionComponent, ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
@@ -33,9 +33,12 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
   };
 
   return (
-    <div
+    <Layout.Header
       style={{
+        position: "sticky",
+        top: 0,
         display: "flex",
+        zIndex: 1,
         flexDirection: isRTL ? "row-reverse" : "row",
         justifyContent: "space-between",
         alignItems: "center", // This centers vertically
@@ -97,7 +100,7 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
       ) : (
         children
       )}
-    </div>
+    </Layout.Header>
   );
 };
 
diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css
index 03789c3..d04c309 100644
--- a/src/pages/cart/cart.module.css
+++ b/src/pages/cart/cart.module.css
@@ -1,7 +1,6 @@
 .cartContainer {
   padding: 15px;
   transition: all 0.3s ease;
-  height: 92vh;
   overflow: auto;
   scrollbar-width: none;
 }
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index ff16509..53002d6 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -1,5 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { Card, Divider, Form, Space } from "antd";
+import { Card, Divider, Form, Space, Layout } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import ImageWithFallback from "components/ImageWithFallback";
@@ -62,9 +62,9 @@ export default function CartMobileTabletLayout({
   };
 
   return (
-    <>
+    <Layout>
       <ProHeader>{t("cart.title")}</ProHeader>
-      <div
+      <Layout.Content
         className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
       >
         <Space
@@ -287,11 +287,9 @@ export default function CartMobileTabletLayout({
 
           {/* Invoice Summary */}
           <OrderSummary />
-          {/* space keeper*/}
-          <div style={{ height: "10vh" }} />
         </Space>
-      </div>
+      </Layout.Content>
       <CartFooter form={form} />
-    </>
+    </Layout>
   );
 }
diff --git a/src/pages/cart/components/cartFooter/CartFooter.tsx b/src/pages/cart/components/cartFooter/CartFooter.tsx
index e622878..ea5dc79 100644
--- a/src/pages/cart/components/cartFooter/CartFooter.tsx
+++ b/src/pages/cart/components/cartFooter/CartFooter.tsx
@@ -1,5 +1,5 @@
 import { colors } from "ThemeConstants.ts";
-import { Button, FormInstance, message } from "antd";
+import { Button, FormInstance, message, Layout } from "antd";
 import { selectCart } from "features/order/orderSlice.ts";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
@@ -30,7 +30,7 @@ export default function CartFooter({ form }: CartFooterProps) {
   };
 
   return (
-    <div className={styles.cartFooter}>
+    <Layout.Footer className={styles.cartFooter}>
       <Link
         to={`/${subdomain}/menu?${orderType ? `orderType=${orderType}` : ""}`}
         style={{
@@ -64,6 +64,6 @@ export default function CartFooter({ form }: CartFooterProps) {
       >
         {t("cart.checkout")}
       </Button>
-    </div>
+    </Layout.Footer>
   );
 }
diff --git a/src/pages/cart/components/cartFooter/footer.module.css b/src/pages/cart/components/cartFooter/footer.module.css
index 78e8cdd..17f3ac4 100644
--- a/src/pages/cart/components/cartFooter/footer.module.css
+++ b/src/pages/cart/components/cartFooter/footer.module.css
@@ -1,7 +1,7 @@
 .cartFooter {
   width: 100%;
   padding: 16px 16px 0;
-  position: fixed;
+  position: sticky;
   bottom: 0;
   left: 0;
   height: 80px;