cart: adjust layout

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>
   );
 };
 

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;
 }

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>
   );
 }

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>
   );
 }

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;