fix bug auth pages

src/components/forms/forgot-password-form.tsx

@@ -19,7 +19,7 @@ export const ForgotPasswordForm = () => {
 
     return (
         <form onSubmit={handleSubmit(handleForgotSubmit)}
-            className="w-fit xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24 w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">

src/components/forms/login-form.tsx

@@ -20,7 +20,7 @@ export const LoginForm = () => {
     }
     return (
         <form onSubmit={handleSubmit(handleLoginSubmit)}
-            className="w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24 w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">

src/components/forms/login-with-code-form.tsx

@@ -16,7 +16,7 @@ export const LoginWithCodeForm = () => {
     }
     return (
         <form onSubmit={handleSubmit(handleLoginWithCode)}
-            className="w-fit xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24 w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">

src/components/forms/register-form.tsx

@@ -17,7 +17,7 @@ export const RegisterForm = () => {
     }
     return (
         <form onSubmit={handleSubmit(handleRegister)}
-            className="w-fit sm:min-w-[500px] max-h-full overflow-y-auto xl:w-1/2 xl:p-0 xl:py-5 p-10 flex flex-col bg-auth-form items-center  gap-y-[42px] rounded-3x rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] max-h-screen overflow-y-auto xl:w-1/2 xl:p-0 xl:py-5 p-10 flex flex-col bg-auth-form items-center  gap-y-[42px] rounded-3x rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">

src/components/ui/auth/layout.tsx

@@ -3,7 +3,7 @@ import { Outlet } from "react-router-dom"
 export const AuthLayout = () => {
     return (
         <section
-            className="flex flex-row h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px]">
+            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden">
             <Outlet />
         </section>
     )

src/pages/auth/forgot-password.tsx

@@ -4,7 +4,7 @@ export const ForgotPassword = () => {
     return (
         <>
             <ForgotPasswordForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/forgot-password.svg" alt="forgot password" className="auth-image-desktop" />
             </div>
         </>

src/pages/auth/login-with-code.tsx

@@ -4,7 +4,7 @@ export const LoginWithCode = () => {
     return (
         <>
             <LoginWithCodeForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/login-with-code.svg" alt="login with code" className="auth-image-desktop" />
             </div>
         </>

src/pages/auth/login.tsx

@@ -5,7 +5,7 @@ export const Login = () => {
     return (
         <>
             <LoginForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/login.svg" alt="login" className="auth-image-desktop" />
             </div>
         </>

src/pages/auth/register.tsx

@@ -4,7 +4,7 @@ export const Register = () => {
     return (
         <>
             <RegisterForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/register.svg" alt="register" className="auth-image-desktop" />
             </div>
         </>

src/pages/auth/reset-password-code.tsx

@@ -6,7 +6,7 @@ export const ResetPasswordCode = () => {
     return (
         <React.Fragment>
             <ResetpasswordCodeForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/reset-password-code.svg" alt="send code reset password" className="auth-image-desktop" />
             </div>
         </React.Fragment>

src/pages/auth/reset-password.tsx

@@ -5,7 +5,7 @@ export const ResetPassword = () => {
     return (
         <React.Fragment>
             <ResetPasswordForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/reset-password.svg" alt="reset password" className="auth-image-desktop" />
             </div>
         </React.Fragment>

src/pages/auth/send-code.tsx

@@ -5,7 +5,7 @@ export const SendCode = () => {
     return (
         <React.Fragment>
             <SendCodeForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/send-code.svg" alt="send code" className="auth-image-desktop" />
             </div>
         </React.Fragment>

tailwind.config.js

@@ -9,7 +9,8 @@ module.exports = {
         "auth-form": "#F7F7F9",
         "primary-text-color": "#11212D",
         "secondary-text-color": "#777577",
-        "primary-color": "#015699"
+        "primary-color": "#015699",
+        "secondary-color": "#E6E8EA"
       }
     },
   },