From 6e49a89045107aab4839c28ac0b26e3a582d9bd3 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 16 Nov 2025 15:38:44 +0300
Subject: [PATCH] checkout: adjust layout

---
 src/pages/address/address.module.css          |  4 +--
 .../checkout/components/CheckoutButton.tsx    |  6 ++--
 src/pages/checkout/page.tsx                   | 28 ++++++++++---------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/pages/address/address.module.css b/src/pages/address/address.module.css
index cd8a0d0..a5da2fc 100644
--- a/src/pages/address/address.module.css
+++ b/src/pages/address/address.module.css
@@ -111,8 +111,6 @@
 .checkoutContainer {
   display: flex;
   flex-direction: column;
-  height: 80vh;
-  min-height: 80vh;
   padding: 16px;
   gap: 16px;
   overflow: auto;
@@ -161,7 +159,7 @@
 .checkoutButtonContainer {
   width: 100%;
   padding: 16px 16px 0;
-  position: fixed;
+  position: sticky;
   bottom: 0;
   left: 0;
   height: 80px;
diff --git a/src/pages/checkout/components/CheckoutButton.tsx b/src/pages/checkout/components/CheckoutButton.tsx
index ba2bdfc..35616d6 100644
--- a/src/pages/checkout/components/CheckoutButton.tsx
+++ b/src/pages/checkout/components/CheckoutButton.tsx
@@ -1,4 +1,4 @@
-import { Button, FormInstance } from "antd";
+import { Button, FormInstance, Layout } from "antd";
 import { selectCart } from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useCallback, useMemo } from "react";
@@ -34,7 +34,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
   );
 
   return (
-    <div className={styles.checkoutButtonContainer}>
+    <Layout.Footer className={styles.checkoutButtonContainer}>
       {shouldShowSplitBill && (
         <Button
           className={styles.splitBillButton}
@@ -52,6 +52,6 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
       >
         {t("checkout.placeOrder")}
       </Button>
-    </div>
+    </Layout.Footer>
   );
 }
diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx
index 527e827..da51b7d 100644
--- a/src/pages/checkout/page.tsx
+++ b/src/pages/checkout/page.tsx
@@ -1,4 +1,4 @@
-import { Form } from "antd";
+import { Form, Layout } from "antd";
 import OrderSummary from "components/OrderSummary/OrderSummary";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
@@ -27,19 +27,21 @@ export default function CheckoutPage() {
         }}
         layout="vertical"
       >
-        <ProHeader>{t("checkout.title")}</ProHeader>
-        <div className={styles.checkoutContainer}>
-          <AddressSummary />
-          <RoomDetails />
-          <OfficeDetails />
-          <GiftDetails />
-          <BriefMenu />
-          <PhoneCard />
-          <PaymentMethods />
-          <OrderSummary />
-        </div>
+        <Layout>
+          <ProHeader>{t("checkout.title")}</ProHeader>
+          <Layout.Content className={styles.checkoutContainer}>
+            <AddressSummary />
+            <RoomDetails />
+            <OfficeDetails />
+            <GiftDetails />
+            <BriefMenu />
+            <PhoneCard />
+            <PaymentMethods />
+            <OrderSummary />
+          </Layout.Content>
 
-        <CheckoutButton form={form} />
+          <CheckoutButton form={form} />
+        </Layout>
       </Form>
     </>
   );