fix: issue #26

client/src/app/(auth)/login/page.tsx

@@ -8,14 +8,14 @@ export const metadata: Metadata = { title: 'Log In' }
 
 const LogIn = () => {
 	return (
-		<div className="bg-card flex h-full max-h-[40rem] overflow-hidden rounded-2xl shadow-2xl md:min-w-[64rem]">
+		<div className="bg-card flex max-h-[40rem] w-full overflow-hidden rounded-2xl shadow-2xl sm:h-full md:min-w-[64rem]">
 			<Image src={hero} priority alt="log-in" className="hidden w-1/2 object-cover md:block" />
 
 			<div className="w-full space-y-10 overflow-y-auto md:w-1/2 md:p-10">
 				<div className="space-y-1 text-center">
 					<h1 className="text-3xl font-bold">Welcome Back!</h1>
 				</div>
-				<div className="space-y-5">
+				<div className="space-y-5 px-5">
 					<LogInForm />
 					<h6 className="block text-center">
 						Don&apos;t have an account?{' '}

client/src/app/(auth)/signup/page.tsx

@@ -8,15 +8,15 @@ export const metadata: Metadata = { title: 'Sign Up' }
 
 const SignUp = () => {
 	return (
-		<div className="bg-card flex h-full max-h-[40rem] overflow-hidden rounded-2xl shadow-2xl md:min-w-[64rem]">
+		<div className="bg-card flex max-h-[40rem] w-full overflow-hidden rounded-2xl shadow-2xl sm:h-full md:min-w-[64rem]">
 			<div className="w-full space-y-10 overflow-y-auto md:w-1/2 md:p-10">
 				<div className="space-y-1 text-center">
 					<h1 className="text-3xl font-bold">Join Us Now</h1>
 					<p className="text-muted-foreground">
 						A place where even <span className="italic">programmers</span> can find a frend
 					</p>
 				</div>
-				<div className="space-y-5">
+				<div className="space-y-5 px-5">
 					<SignUpForm />
 					<h6 className="block text-center">
 						Already have an account?{' '}

client/src/app/layout.tsx

@@ -23,7 +23,6 @@ export const metadata: Metadata = {
 }
 
 // TODO: shadcn-ui/toast
-// TODO: fix issue https://github.com/warmachine028/next-book/issues/26
 const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
 	return (
 		//? FIX: https://github.com/shadcn-ui/ui/issues/1906#issuecomment-1807426212

client/src/components/forms/SignUp.tsx

@@ -39,7 +39,13 @@ const SignUpForm = () => {
 						<FormItem>
 							<FormLabel>Username</FormLabel>
 							<FormControl>
-								<Input autoComplete="username" placeholder="eg: pritamKunduC24" {...field} />
+								<Input
+									pattern="^[a-zA-Z0-9_-]+$"
+									autoComplete="username"
+									placeholder="eg: pritamKunduC24"
+									title="Enter your username"
+									{...field}
+								/>
 							</FormControl>
 							{useFormState().errors.userName ? (
 								<FormMessage />
@@ -57,6 +63,7 @@ const SignUpForm = () => {
 							<FormLabel>Email</FormLabel>
 							<FormControl>
 								<Input
+									title="Enter your email"
 									autoComplete="email"
 									placeholder="eg: [email protected]"
 									type="email"
@@ -79,6 +86,8 @@ const SignUpForm = () => {
 							<FormLabel>Password</FormLabel>
 							<FormControl>
 								<PasswordInput
+									title="Enter your password"
+									minLength={8}
 									autoComplete="new-password"
 									placeholder="eg: 1@$abShadC23"
 									type="password"