From 964641a58ddd36daccc456b272df173b7f547d43 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Fri, 18 Jul 2025 15:06:50 +0400
Subject: [PATCH] feat: full screen form for mobile

---
 app/create-id/page.tsx                        |  2 +-
 app/layout.tsx                                |  2 ++
 app/page.tsx                                  |  2 +-
 components/Footer/Footer.tsx                  | 30 +++++++++++++++++++
 components/LoginForm/LoginForm.tsx            |  2 +-
 components/PageBlock/PageItem.module.css      | 17 +++++++++++
 components/PageBlock/PageItem.tsx             |  5 +++-
 .../PageContainer/PageContainer.module.css    |  2 +-
 components/PhoneInput/PhoneInput.module.css   |  4 ---
 components/PhoneInput/PhoneInput.tsx          |  7 +++++
 .../PhoneInput/components/CountrySelect.tsx   | 10 +++++--
 11 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 components/Footer/Footer.tsx

diff --git a/app/create-id/page.tsx b/app/create-id/page.tsx
index 6bf5cb4..bf92600 100644
--- a/app/create-id/page.tsx
+++ b/app/create-id/page.tsx
@@ -6,7 +6,7 @@ import PageContainer from "@/components/PageContainer/PageContainer";
 export default function CreateIdPage() {
     return (
         <PageContainer center>
-            <PageItem>
+            <PageItem fullScreenMobile>
                 <Logo title={"Создание аккаунта"} />
                 <LoginForm isCreatingId />
             </PageItem>
diff --git a/app/layout.tsx b/app/layout.tsx
index f89ea3d..d24ef32 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,6 +8,7 @@ import {
 import Header from "@/components/Header/Header";
 import { theme } from "@/theme";
 import "@/app/global.css";
+import Footer from "@/components/Footer/Footer";
 
 export const metadata = {
     title: "LogiDex ID",
@@ -45,6 +46,7 @@ export default function RootLayout({ children }: Props) {
                     defaultColorScheme={"dark"}>
                     <Header />
                     {children}
+                    <Footer />
                 </MantineProvider>
             </body>
         </html>
diff --git a/app/page.tsx b/app/page.tsx
index ddc3540..25af879 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,7 +6,7 @@ import PageContainer from "@/components/PageContainer/PageContainer";
 export default function MainPage() {
     return (
         <PageContainer center>
-            <PageItem>
+            <PageItem fullScreenMobile>
                 <Logo title={"Вход"} />
                 <LoginForm />
             </PageItem>
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
new file mode 100644
index 0000000..b9ab74e
--- /dev/null
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import { Group, Text } from "@mantine/core";
+
+const Footer = () => {
+    return (
+        <Group
+            justify={"flex-end"}
+            align={"flex-end"}
+            h={"7vh"}
+            p={"md"}>
+            <Group gap={"xl"}>
+                <Link
+                    href={"#"}
+                    style={{
+                        textDecoration: "none",
+                        color: "inherit",
+                        fontSize: 14,
+                    }}>
+                    Help and support
+                </Link>
+                <Group gap={5}>
+                    <Text style={{ fontSize: 18 }}>©</Text>
+                    <Text style={{ fontSize: 14 }}>2025, LogiDex</Text>
+                </Group>
+            </Group>
+        </Group>
+    );
+};
+
+export default Footer;
diff --git a/components/LoginForm/LoginForm.tsx b/components/LoginForm/LoginForm.tsx
index 6a64ac9..cf90f91 100644
--- a/components/LoginForm/LoginForm.tsx
+++ b/components/LoginForm/LoginForm.tsx
@@ -31,7 +31,7 @@ const LoginForm: FC<Props> = ({ isCreatingId = false }) => {
 
     return (
         <form onSubmit={form.onSubmit(handleSubmit)}>
-            <Stack w={350}>
+            <Stack>
                 <PhoneInput {...form.getInputProps("phoneNumber")} />
                 {isCreatingId ? (
                     <>
diff --git a/components/PageBlock/PageItem.module.css b/components/PageBlock/PageItem.module.css
index 2cf55ae..56cf0b8 100644
--- a/components/PageBlock/PageItem.module.css
+++ b/components/PageBlock/PageItem.module.css
@@ -22,3 +22,20 @@
 .container-no-border-radius {
     border-radius: 0 !important;
 }
+
+.container-full-screen-mobile {
+    @media (max-width: 48em) {
+        min-height: 100vh;
+        height: 100vh;
+        width: 100vw;
+        border-radius: 0 !important;
+        padding: rem(40) rem(20) rem(20);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 100;
+        overflow-y: auto;
+    }
+}
diff --git a/components/PageBlock/PageItem.tsx b/components/PageBlock/PageItem.tsx
index 2782229..77741ba 100644
--- a/components/PageBlock/PageItem.tsx
+++ b/components/PageBlock/PageItem.tsx
@@ -8,6 +8,7 @@ type Props = {
     fullHeight?: boolean;
     fullHeightFixed?: boolean;
     noBorderRadius?: boolean;
+    fullScreenMobile?: boolean;
 };
 
 const PageItem: FC<Props> = ({
@@ -16,6 +17,7 @@ const PageItem: FC<Props> = ({
     fullHeight = false,
     fullHeightFixed = false,
     noBorderRadius = false,
+    fullScreenMobile = false,
 }) => {
     return (
         <div
@@ -24,7 +26,8 @@ const PageItem: FC<Props> = ({
                 styles.container,
                 fullHeight && styles["container-full-height"],
                 fullHeightFixed && styles["container-full-height-fixed"],
-                noBorderRadius && styles["container-no-border-radius"]
+                noBorderRadius && styles["container-no-border-radius"],
+                fullScreenMobile && styles["container-full-screen-mobile"]
             )}>
             {children}
         </div>
diff --git a/components/PageContainer/PageContainer.module.css b/components/PageContainer/PageContainer.module.css
index 415d229..a2cca97 100644
--- a/components/PageContainer/PageContainer.module.css
+++ b/components/PageContainer/PageContainer.module.css
@@ -2,6 +2,6 @@
     display: flex;
     flex-direction: column;
     gap: rem(10);
-    min-height: 70vh;
+    min-height: 86vh;
     background-color: transparent;
 }
diff --git a/components/PhoneInput/PhoneInput.module.css b/components/PhoneInput/PhoneInput.module.css
index a7e0bf3..70ec8ee 100644
--- a/components/PhoneInput/PhoneInput.module.css
+++ b/components/PhoneInput/PhoneInput.module.css
@@ -14,7 +14,3 @@
     }
     border-radius: 15px;
 }
-
-.country-dropdown {
-    border-radius: 15px;
-}
diff --git a/components/PhoneInput/PhoneInput.tsx b/components/PhoneInput/PhoneInput.tsx
index 9df8aa3..5a4bfe4 100644
--- a/components/PhoneInput/PhoneInput.tsx
+++ b/components/PhoneInput/PhoneInput.tsx
@@ -41,6 +41,7 @@ const PhoneInput = ({
         initialData.current.localValue
     );
     const inputRef = useRef<HTMLInputElement>(null);
+    const [dropdownWidth, setDropdownWidth] = useState<number>(300);
 
     const lastNotifiedValue = useRef<string | null>(value ?? "");
 
@@ -71,6 +72,11 @@ const PhoneInput = ({
     const { readOnly, disabled } = props;
     const leftSectionWidth = 90;
 
+    useEffect(() => {
+        if (!inputRef.current?.offsetWidth) return;
+        setDropdownWidth(inputRef.current?.offsetWidth);
+    }, [inputRef.current?.offsetWidth]);
+
     return (
         <InputBase
             {...props}
@@ -89,6 +95,7 @@ const PhoneInput = ({
                         }
                     }}
                     leftSectionWidth={leftSectionWidth}
+                    inputWidth={dropdownWidth}
                 />
             }
             leftSectionWidth={leftSectionWidth}
diff --git a/components/PhoneInput/components/CountrySelect.tsx b/components/PhoneInput/components/CountrySelect.tsx
index 37fdca3..aa0892f 100644
--- a/components/PhoneInput/components/CountrySelect.tsx
+++ b/components/PhoneInput/components/CountrySelect.tsx
@@ -21,6 +21,7 @@ type Props = {
     setCountry: (country: Country) => void;
     disabled: boolean | undefined;
     leftSectionWidth: number;
+    inputWidth?: number;
 };
 
 const CountrySelect = ({
@@ -28,6 +29,7 @@ const CountrySelect = ({
     setCountry,
     disabled,
     leftSectionWidth,
+    inputWidth,
 }: Props) => {
     const [search, setSearch] = useState("");
 
@@ -84,10 +86,12 @@ const CountrySelect = ({
     return (
         <Combobox
             store={combobox}
-            width={350}
             position={"bottom-start"}
-            classNames={{
-                dropdown: style["country-dropdown"],
+            styles={{
+                dropdown: {
+                    borderRadius: "15px",
+                    minWidth: `${inputWidth}px`,
+                },
             }}
             onOptionSubmit={val => {
                 setCountry(countryOptionsDataMap[val]);