fix: Add mobile responsive padding to all auth pages

- Auth layout: reduce padding on small screens (p-4 sm:p-8)
- All auth cards: p-6 sm:p-10 and rounded-2xl sm:rounded-[2rem]
- Affects: login, register, forgot-password, reset-password, verify-email, oauth-callback

Author: Jason-chen-coder

apps/web/src/app/auth/forgot-password/page.tsx

@@ -30,7 +30,7 @@ export default function ForgotPasswordPage() {
 
   if (sent) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-10">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
         <div className="space-y-6 text-center">
           <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20">
             <svg className="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -54,7 +54,7 @@ export default function ForgotPasswordPage() {
   }
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-10">
+    <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
       <div className="space-y-8">
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">

apps/web/src/app/auth/layout.tsx

@@ -14,9 +14,9 @@ export default function AuthLayout({
   return (
     <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-gray-950' : 'bg-gradient-to-br from-[#333DFC]/5 via-[#333DFC]/10 to-[#333DFC]/20'}`}>
       {/* Left Side - Form Area */}
-      <div className="w-full  flex flex-col bg-white dark:bg-gray-900 lg:rounded-r-[3rem]">
+      <div className="w-full flex flex-col bg-white dark:bg-gray-900 lg:rounded-r-[3rem]">
         {/* Header with Logo and Theme Toggle */}
-        <div className="p-8 flex items-center justify-between">
+        <div className="p-4 sm:p-8 flex items-center justify-between">
           <div className="flex items-center gap-3">
             <Image
               src="/docStudio_icon.png"
@@ -47,7 +47,7 @@ export default function AuthLayout({
         </div>
 
         {/* Form Container */}
-        <div className="flex-1 flex items-center justify-center px-8 pb-8">
+        <div className="flex-1 flex items-center justify-center px-4 sm:px-8 pb-4 sm:pb-8">
           <div className="w-full max-w-md animate-fade-in">{children}</div>
         </div>
       </div>

apps/web/src/app/auth/login/page.tsx

@@ -46,8 +46,8 @@ function LoginForm() {
   }
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-10">
-      <div className="space-y-8">
+    <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
+      <div className="space-y-6 sm:space-y-8">
         {/* Header */}
         <div className="form-float-in" style={{ animationDelay: '40ms' }}>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">

apps/web/src/app/auth/oauth-callback/page.tsx

@@ -26,7 +26,7 @@ function OAuthCallbackContent() {
   }, [searchParams]);
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg p-10 text-center">
+    <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg p-6 sm:p-10 text-center">
       <div className="flex items-center justify-center">
         <svg className="animate-spin h-8 w-8 text-[#333DFC]" fill="none" viewBox="0 0 24 24">
           <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />

apps/web/src/app/auth/register/page.tsx

@@ -67,8 +67,8 @@ export default function RegisterPage() {
   }
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-10">
-      <div className="space-y-8">
+    <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
+      <div className="space-y-6 sm:space-y-8">
         {/* Header */}
         <div className="form-float-in" style={{ animationDelay: '40ms' }}>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">

apps/web/src/app/auth/reset-password/page.tsx

@@ -44,7 +44,7 @@ function ResetPasswordForm() {
 
   if (success) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-10">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
         <div className="space-y-6 text-center">
           <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20">
             <svg className="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -67,7 +67,7 @@ function ResetPasswordForm() {
   }
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-10">
+    <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
       <div className="space-y-8">
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">

apps/web/src/app/auth/verify-email/page.tsx

@@ -30,7 +30,7 @@ function VerifyEmailContent() {
   }, [token]);
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-10">
+    <div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
       <div className="space-y-6 text-center">
         {status === 'loading' && (
           <>