From f82d3f70b81a5d811a39a412057934b0cdbff0f7 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 2 Apr 2026 22:16:20 +0200
Subject: [PATCH] fix: improve mobile responsiveness for login and signup pages

Add horizontal padding to page containers so cards don't bleed to the
edges on small screens, reduce card inner padding on mobile, scale down
headings at mobile breakpoints, and change the first/last name grid from
a fixed two-column layout to responsive (single column on mobile).
Replace the fixed-width form class (w-95) with w-full on the login form.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/pages/login.tsx  | 8 ++++----
 apps/main/src/pages/signup.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/main/src/pages/login.tsx b/apps/main/src/pages/login.tsx
index 2fb6a79..41ca566 100644
--- a/apps/main/src/pages/login.tsx
+++ b/apps/main/src/pages/login.tsx
@@ -95,7 +95,7 @@ export function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden">
+    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden px-4 py-8 sm:px-6">
       <AnimatedBackground />
       <div
         ref={cardRef}
@@ -113,7 +113,7 @@ export function LoginPage() {
 
         <div
           className={twMerge(
-            "relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
+            "relative w-full h-full p-5 sm:p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
             isHovered
               ? "shadow-[0_15px_35px_rgba(0,0,0,0.15)] dark:shadow-[0_15px_35px_rgba(0,0,0,0.3)]"
               : "shadow-xl shadow-black/10 dark:shadow-black/25"
@@ -161,7 +161,7 @@ export function LoginPage() {
             />
           </div>
 
-          <h1 className="text-3xl font-bold text-foreground mb-8 text-center">
+          <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-6 sm:mb-8 text-center">
             {t("auth:login.title")}
           </h1>
 
@@ -175,7 +175,7 @@ export function LoginPage() {
           </div>
 
           <div className="space-y-4 flex flex-col items-center">
-            <form className="space-y-4 w-95 max-w-md mx-auto" onSubmit={onSubmit}>
+            <form className="space-y-4 w-full max-w-md mx-auto" onSubmit={onSubmit}>
               <div className="space-y-2">
                 <Label htmlFor="email">
                   {t("common:labels.email")} <span className="text-red-500">*</span>
diff --git a/apps/main/src/pages/signup.tsx b/apps/main/src/pages/signup.tsx
index 7d2bb39..59ad6c0 100644
--- a/apps/main/src/pages/signup.tsx
+++ b/apps/main/src/pages/signup.tsx
@@ -151,7 +151,7 @@ export function SignUpPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden">
+    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden px-4 py-8 sm:px-6">
       <AnimatedBackground />
       <div
         ref={cardRef}
@@ -168,7 +168,7 @@ export function SignUpPage() {
 
         <div
           className={twMerge(
-            "relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
+            "relative w-full h-full p-4 sm:p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
             isHovered
               ? "shadow-[0_15px_35px_rgba(0,0,0,0.15)] dark:shadow-[0_15px_35px_rgba(0,0,0,0.3)]"
               : "shadow-xl shadow-black/10 dark:shadow-black/25"
@@ -216,13 +216,13 @@ export function SignUpPage() {
             />
           </div>
 
-          <h1 className="text-2xl font-bold text-foreground mb-6 text-center">
+          <h1 className="text-xl sm:text-2xl font-bold text-foreground mb-5 sm:mb-6 text-center">
             {t("auth:signup.title")}
           </h1>
 
           <div className="space-y-3 flex flex-col items-center">
             <form className="space-y-3 w-full" onSubmit={onSubmit}>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div className="space-y-2">
                   <Label htmlFor="first_name" className="text-sm">
                     {t("auth:signup.firstName")} <span className="text-red-500">*</span>