From 207541136f3d318a1cb3ce632b478ea45f6a0d97 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 23 Nov 2025 17:34:32 +0300
Subject: [PATCH] fix split-bill page height

---
 src/pages/split-bill/page.tsx | 258 ++++++++++++++++++----------------
 1 file changed, 137 insertions(+), 121 deletions(-)

diff --git a/src/pages/split-bill/page.tsx b/src/pages/split-bill/page.tsx
index 7e7448c..88e1960 100644
--- a/src/pages/split-bill/page.tsx
+++ b/src/pages/split-bill/page.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { Button, Layout } from "antd";
 import PeopleIcon from "components/Icons/PeopleIcon";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
@@ -19,130 +19,146 @@ export default function SplitBillPage() {
 
   return (
     <>
-      <ProHeader>{t("checkout.splitBill")}</ProHeader>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          height: "82vh",
-          padding: 16,
-          gap: 16,
-          overflow: "auto",
-          scrollbarWidth: "none",
-        }}
-      >
-        <ProInputCard title={t("checkout.splitBill")}>
+      <Layout>
+        <ProHeader>{t("checkout.splitBill")}</ProHeader>
+        <Layout.Content>
           <div
-            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
-          >
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "space-between",
-                gap: "1rem",
-                padding: 8,
-              }}
-            >
-              <div
-                style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
-              >
-                <Button
-                  type="text"
-                  shape="circle"
-                  style={{
-                    backgroundColor: "rgba(95, 108, 123, 0.05)",
-                    position: "relative",
-                    top: -10,
-                  }}
-                >
-                  <PeopleIcon />
-                </Button>
-                <ProText
-                  style={{
-                    fontSize: "1rem",
-                    marginTop: 3,
-                    color: ProGray1,
-                  }}
-                >
-                  {t("checkout.totalPeople")}
-                </ProText>
-              </div>
-
-              <TotalPeopleActions />
-            </div>
-
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "space-between",
-                gap: "1rem",
-                padding: 8,
-              }}
-            >
-              <div
-                style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
-              >
-                <Button
-                  type="text"
-                  shape="circle"
-                  style={{
-                    backgroundColor: "rgba(95, 108, 123, 0.05)",
-                    position: "relative",
-                    top: -10,
-                  }}
-                >
-                  <PeopleIcon />
-                </Button>
-                <ProText
-                  style={{
-                    fontSize: "1rem",
-                    marginTop: 2,
-                    color: ProGray1,
-                  }}
-                >
-                  {t("checkout.payFor")}
-                </ProText>
-              </div>
-
-              <PayForActions />
-            </div>
-          </div>
-        </ProInputCard>
-        <PaymentMethods />
-        <PaymentSummary />
-      </div>
-      <div
-        style={{
-          width: "100%",
-          padding: "16px 16px 0",
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          height: "80px",
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-around",
-          gap: "1rem",
-          backgroundColor: themeName === "light" ? "white" : ProBlack2,
-        }}
-      >
-        <Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
-          <Button
-            type="primary"
-            shape="round"
             style={{
-              width: "100%",
-              height: 48,
-              marginBottom: 16,
-              boxShadow: "none",
+              display: "flex",
+              flexDirection: "column",
+              height: "82vh",
+              padding: 16,
+              gap: 16,
+              overflow: "auto",
+              scrollbarWidth: "none",
             }}
           >
-            {t("checkout.placeOrder")}
-          </Button>
-        </Link>
-      </div>
+            <ProInputCard title={t("checkout.splitBill")}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "1rem",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    gap: "1rem",
+                    padding: 8,
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      gap: "1rem",
+                    }}
+                  >
+                    <Button
+                      type="text"
+                      shape="circle"
+                      style={{
+                        backgroundColor: "rgba(95, 108, 123, 0.05)",
+                        position: "relative",
+                        top: -10,
+                      }}
+                    >
+                      <PeopleIcon />
+                    </Button>
+                    <ProText
+                      style={{
+                        fontSize: "1rem",
+                        marginTop: 3,
+                        color: ProGray1,
+                      }}
+                    >
+                      {t("checkout.totalPeople")}
+                    </ProText>
+                  </div>
+
+                  <TotalPeopleActions />
+                </div>
+
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    gap: "1rem",
+                    padding: 8,
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      gap: "1rem",
+                    }}
+                  >
+                    <Button
+                      type="text"
+                      shape="circle"
+                      style={{
+                        backgroundColor: "rgba(95, 108, 123, 0.05)",
+                        position: "relative",
+                        top: -10,
+                      }}
+                    >
+                      <PeopleIcon />
+                    </Button>
+                    <ProText
+                      style={{
+                        fontSize: "1rem",
+                        marginTop: 2,
+                        color: ProGray1,
+                      }}
+                    >
+                      {t("checkout.payFor")}
+                    </ProText>
+                  </div>
+
+                  <PayForActions />
+                </div>
+              </div>
+            </ProInputCard>
+            <PaymentMethods />
+            <PaymentSummary />
+          </div>
+          <div
+            style={{
+              width: "100%",
+              padding: "16px 16px 0",
+              position: "fixed",
+              bottom: 0,
+              left: 0,
+              height: "80px",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-around",
+              gap: "1rem",
+              backgroundColor: themeName === "light" ? "white" : ProBlack2,
+            }}
+          >
+            <Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
+              <Button
+                type="primary"
+                shape="round"
+                style={{
+                  width: "100%",
+                  height: 48,
+                  marginBottom: 16,
+                  boxShadow: "none",
+                }}
+              >
+                {t("checkout.placeOrder")}
+              </Button>
+            </Link>
+          </div>
+        </Layout.Content>
+      </Layout>
     </>
   );
 }