fix: forms fix for mobiles

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="_"

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}

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>