fix: forms fix for mobiles

src/app/verify-phone/components/VerifyPhoneForm/VerifyPhoneForm.tsx

@@ -55,8 +55,10 @@ const VerifyPhoneForm: FC = () => {
     const navigateToLogin = () => redirect("/");
 
     return (
-        <form onSubmit={form.onSubmit(handleSubmit)}>
+        <form
-            <Stack>
+            style={{ justifyItems: "center" }}
+            onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack maw={500}>
                 <PinInput
                     length={6}
                     placeholder="_"

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)}>
+        <form
-            <Stack>
+            style={{ justifyItems: "center" }}
+            onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack maw={500}>
                 <PhoneInput
                     {...form.getInputProps("phoneNumber")}
                     setPhoneMask={setPhoneMask}

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>