feat: full screen form for mobile

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>

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>

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>

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;

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 ? (
                     <>

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

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>

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

components/PhoneInput/PhoneInput.module.css

@@ -14,7 +14,3 @@
     }
     border-radius: 15px;
 }
-
-.country-dropdown {
-    border-radius: 15px;
-}

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}

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