checkout: adjust layout

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;

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

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,8 +27,9 @@ export default function CheckoutPage() {
         }}
         layout="vertical"
       >
+        <Layout>
           <ProHeader>{t("checkout.title")}</ProHeader>
-        <div className={styles.checkoutContainer}>
+          <Layout.Content className={styles.checkoutContainer}>
             <AddressSummary />
             <RoomDetails />
             <OfficeDetails />
@@ -37,9 +38,10 @@ export default function CheckoutPage() {
             <PhoneCard />
             <PaymentMethods />
             <OrderSummary />
-        </div>
+          </Layout.Content>
 
           <CheckoutButton form={form} />
+        </Layout>
       </Form>
     </>
   );