From 3560afabcc359143c645662888ec17730d9bce7c Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Mon, 11 Aug 2025 11:00:57 +0400
Subject: [PATCH] fix: forms fix for mobiles

---
 .../components/VerifyPhoneForm/VerifyPhoneForm.tsx        | 8 +++++---
 src/components/features/LoginForm/LoginForm.tsx           | 8 +++++---
 src/components/ui/Logo/Logo.tsx                           | 2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/verify-phone/components/VerifyPhoneForm/VerifyPhoneForm.tsx b/src/app/verify-phone/components/VerifyPhoneForm/VerifyPhoneForm.tsx
index 0b2d423..d8b4052 100644
--- a/src/app/verify-phone/components/VerifyPhoneForm/VerifyPhoneForm.tsx
+++ b/src/app/verify-phone/components/VerifyPhoneForm/VerifyPhoneForm.tsx
@@ -27,7 +27,7 @@ const VerifyPhoneForm: FC = () => {
     const authState = useSelector((state: RootState) => state.auth);
 
     const handleSubmit = (values: VerifyNumberForm) => {
-        
+
         if (!authState.phoneNumber || !authState.loginChallenge) return;
         console.log(authState.phoneNumber.replace(/ /g, ""));
 
@@ -55,8 +55,10 @@ const VerifyPhoneForm: FC = () => {
     const navigateToLogin = () => redirect("/");
 
     return (
-        <form onSubmit={form.onSubmit(handleSubmit)}>
-            <Stack>
+        <form
+            style={{ justifyItems: "center" }}
+            onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack maw={500}>
                 <PinInput
                     length={6}
                     placeholder="_"
diff --git a/src/components/features/LoginForm/LoginForm.tsx b/src/components/features/LoginForm/LoginForm.tsx
index a698a71..25635f8 100644
--- a/src/components/features/LoginForm/LoginForm.tsx
+++ b/src/components/features/LoginForm/LoginForm.tsx
@@ -6,11 +6,11 @@ import { Button, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { Auth } from "@/client";
 import PhoneInput from "@/components/ui/PhoneInput/PhoneInput";
+import { notifications } from "@/lib/notifications";
 import {
     setLoginChallenge,
     setPhoneNumber,
 } from "@/lib/store/features/auth/authSlice";
-import { notifications } from "@/lib/notifications";
 import { useAppDispatch } from "@/lib/store/store";
 
 type LoginForm = {
@@ -69,8 +69,10 @@ const LoginForm: FC<Props> = ({ loginChallenge, isCreatingId = false }) => {
     const navigateToLogin = () => router.push("/");
 
     return (
-        <form onSubmit={form.onSubmit(handleSubmit)}>
-            <Stack>
+        <form
+            style={{ justifyItems: "center" }}
+            onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack maw={500}>
                 <PhoneInput
                     {...form.getInputProps("phoneNumber")}
                     setPhoneMask={setPhoneMask}
diff --git a/src/components/ui/Logo/Logo.tsx b/src/components/ui/Logo/Logo.tsx
index de1903f..8b62c33 100644
--- a/src/components/ui/Logo/Logo.tsx
+++ b/src/components/ui/Logo/Logo.tsx
@@ -32,7 +32,7 @@ const Logo = ({ title }: Props) => {
                     <Title
                         order={4}
                         mb={"lg"}
-                        style={{ color: myColor[6] }}>
+                        style={{ color: myColor[6], textAlign: "center" }}>
                         {title}
                     </Title>
                 </Center>