From 505623cf5266fbc954579862b02a0fa868d377d5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 30 Dec 2025 22:47:54 +0000
Subject: [PATCH] fix: mobile responsive layout for login and signup pages

- Reduce horizontal padding on mobile (16px instead of 24-32px)
- Add responsive title font sizes using clamp()
- Add responsive padding to OAuth and form cards
- Prevent horizontal overflow on small screens
- Reduce gap between grid columns on mobile
---
 src/app/pages/LoginPage.tsx  | 17 +++++++++--------
 src/app/pages/SignupPage.tsx | 26 ++++++++++++++------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/app/pages/LoginPage.tsx b/src/app/pages/LoginPage.tsx
index 26bfc99..295995a 100644
--- a/src/app/pages/LoginPage.tsx
+++ b/src/app/pages/LoginPage.tsx
@@ -172,11 +172,12 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen py-12" style={{
+    <div className="min-h-screen py-8 sm:py-12" style={{
       background: '#FAFAFA',
       color: 'var(--text-primary)',
-      paddingLeft: 'clamp(24px, 5vw, 48px)',
-      paddingRight: 'clamp(24px, 5vw, 48px)'
+      paddingLeft: 'clamp(16px, 4vw, 48px)',
+      paddingRight: 'clamp(16px, 4vw, 48px)',
+      overflowX: 'hidden',
     }}>
       <div style={{
         maxWidth: '1400px',
@@ -218,7 +219,7 @@ export default function LoginPage() {
 
             {/* Title - Neutral, no "Welcome" */}
             <h1 style={{
-              fontSize: '48px',
+              fontSize: 'clamp(32px, 6vw, 48px)',
               fontWeight: 700,
               lineHeight: '1.1',
               marginBottom: '24px',
@@ -330,7 +331,7 @@ export default function LoginPage() {
             </div>
 
             {/* OAuth - Matte Gray Glass */}
-            <div 
+            <div
               className="relative overflow-hidden"
               style={{
                 background: 'rgba(255, 255, 255, 0.7)',
@@ -338,7 +339,7 @@ export default function LoginPage() {
                 WebkitBackdropFilter: 'blur(12px)',
                 border: '1px solid rgba(229, 229, 229, 0.6)',
                 borderRadius: '16px',
-                padding: '24px',
+                padding: 'clamp(16px, 4vw, 24px)',
                 marginBottom: '24px',
                 boxShadow: '0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8)'
               }}
@@ -431,7 +432,7 @@ export default function LoginPage() {
             </div>
 
             {/* Email/Password Form - Matte Gray Glass */}
-            <div 
+            <div
               className="relative overflow-hidden"
               style={{
                 background: 'rgba(255, 255, 255, 0.7)',
@@ -439,7 +440,7 @@ export default function LoginPage() {
                 WebkitBackdropFilter: 'blur(12px)',
                 border: '1px solid rgba(229, 229, 229, 0.6)',
                 borderRadius: '16px',
-                padding: '24px',
+                padding: 'clamp(16px, 4vw, 24px)',
                 boxShadow: '0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8)'
               }}
             >
diff --git a/src/app/pages/SignupPage.tsx b/src/app/pages/SignupPage.tsx
index 7ca753b..ccbf611 100644
--- a/src/app/pages/SignupPage.tsx
+++ b/src/app/pages/SignupPage.tsx
@@ -174,11 +174,13 @@ export default function SignupPage() {
   };
 
   return (
-    <div 
-      className="min-h-screen px-8 py-20 relative overflow-hidden" 
+    <div
+      className="min-h-screen py-12 sm:py-20 relative overflow-hidden"
       style={{
         fontFamily: 'Inter, sans-serif',
-        background: '#FAFAFA'
+        background: '#FAFAFA',
+        paddingLeft: 'clamp(16px, 4vw, 32px)',
+        paddingRight: 'clamp(16px, 4vw, 32px)',
       }}
     >
       {/* Background Blobs */}
@@ -200,9 +202,9 @@ export default function SignupPage() {
       </div>
 
       <div className="max-w-[1280px] mx-auto relative z-10">
-        <div className="grid lg:grid-cols-2 gap-24 items-start">
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-24 items-start">
           {/* Left: Value Proposition */}
-          <div className="pt-12">
+          <div className="pt-4 lg:pt-12">
             <div className="inline-flex items-center gap-4 mb-16 group transition-all duration-200">
               <div className="transition-transform group-hover:scale-105 duration-200">
                 <VspecLogo size={56} variant="accent" />
@@ -221,7 +223,7 @@ export default function SignupPage() {
             <h1
               className="mb-8"
               style={{
-                fontSize: '56px',
+                fontSize: 'clamp(32px, 7vw, 56px)',
                 fontWeight: 700,
                 lineHeight: 1.1,
                 letterSpacing: '-0.02em',
@@ -334,8 +336,8 @@ export default function SignupPage() {
             </div>
 
             {/* OAuth */}
-            <div 
-              className="p-8 rounded-2xl mb-10"
+            <div
+              className="p-5 sm:p-8 rounded-2xl mb-10"
               style={{
                 background: '#FFFFFF',
                 border: '1px solid #E0E0E0',
@@ -432,8 +434,8 @@ export default function SignupPage() {
             </div>
 
             {/* DID Authentication - NEW ⭐ */}
-            <div 
-              className="p-8 rounded-2xl mb-10"
+            <div
+              className="p-5 sm:p-8 rounded-2xl mb-10"
               style={{
                 background: 'linear-gradient(135deg, rgba(124, 133, 237, 0.08) 0%, rgba(124, 133, 237, 0.03) 100%)',
                 border: '2px solid rgba(124, 133, 237, 0.3)',
@@ -521,8 +523,8 @@ export default function SignupPage() {
             </div>
 
             {/* Email Signup Form */}
-            <div 
-              className="p-8 rounded-2xl"
+            <div
+              className="p-5 sm:p-8 rounded-2xl"
               style={{
                 background: '#FFFFFF',
                 border: '1px solid #E0E0E0',