fix layout for mobile

Ledchig · Jul 4, 2024 · ccc93af · ccc93af
1 parent 5b1c425
commit ccc93af
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
@@ -45,7 +45,7 @@ const Profile = () => {
     <div className="flex flex-col items-center gap-6">
       <LayoutForm>
         <form
-          className="flex w-96 flex-col items-center gap-9"
+          className="flex w-80 md:w-96 flex-col items-center gap-9"
           onSubmit={handleSubmit(onSubmit)}
         >
           <h1 className="text-2xl font-bold leading-7">Изменение данных</h1>

diff --git a/src/pages/SignIn/SignIn.tsx b/src/pages/SignIn/SignIn.tsx
@@ -19,7 +19,7 @@ const SignIn = () => {
     reValidateMode: 'onChange',
     shouldUnregister: true,
   })
-  
+
   const navigate = useNavigate()
 
   const dispatch = useAppDispatch()
@@ -44,7 +44,7 @@ const SignIn = () => {
     <div className="flex flex-col items-center gap-6">
       <LayoutForm>
         <form
-          className="flex w-96 flex-col items-center gap-9"
+          className="flex w-64 flex-col items-center gap-9 md:w-96"
           onSubmit={handleSubmit(onSubmit)}
         >
           <h1 className="text-2xl font-bold leading-7">Авторизация</h1>
@@ -80,11 +80,13 @@ const SignIn = () => {
           </div>
         </form>
       </LayoutForm>
-      <div>
-        Ещё не зарегистрированы?{' '}
-        <a className="underline hover:no-underline" href="/sign-up">
-          Зарегистрироваться
-        </a>
+      <div className="flex justify-center text-sm md:text-base">
+        <p>
+          Ещё не зарегистрированы?{' '}
+          <a className="underline hover:no-underline" href="/sign-up">
+            Зарегистрироваться
+          </a>
+        </p>
       </div>
     </div>
   )

diff --git a/src/pages/SignUp/SignUp.tsx b/src/pages/SignUp/SignUp.tsx
@@ -44,7 +44,7 @@ const SignUp = () => {
     <div className="flex flex-col items-center gap-6">
       <LayoutForm>
         <form
-          className="flex w-96 flex-col items-center gap-9"
+          className="flex w-80 flex-col items-center gap-9 md:w-96"
           onSubmit={handleSubmit(onSubmit)}
         >
           <h1 className="text-2xl font-bold leading-7">Регистрация</h1>
@@ -79,11 +79,13 @@ const SignUp = () => {
           </div>
         </form>
       </LayoutForm>
-      <div>
-        Уже зарегистрированы?{' '}
-        <a className="underline hover:no-underline" href="/sign-in">
-          Войти
-        </a>
+      <div className="flex justify-center text-sm md:text-base">
+        <p>
+          Уже зарегистрированы?{' '}
+          <a className="underline hover:no-underline" href="/sign-in">
+            Войти
+          </a>
+        </p>
       </div>
     </div>
   )