From 1e529a67417bf4cb2c14b2f7b5a67eb76c646cd0 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Fri, 24 Apr 2026 21:22:12 -0400
Subject: [PATCH] style(auth): improve auth page layout for mobile viewports

- use `min-h-dvh`, `flex-col`, and top-aligned justify on small screens in AuthPage
- add `mx-auto` to all auth page cards for consistent centering
---
 src/features/auth/AuthPage.server.js                 | 2 +-
 src/features/auth/pages/ConfirmEmailPage.client.js   | 2 +-
 src/features/auth/pages/ForgotPasswordPage.client.js | 2 +-
 src/features/auth/pages/LoginPage.client.js          | 2 +-
 src/features/auth/pages/LogoutPage.client.js         | 2 +-
 src/features/auth/pages/RegisterPage.client.js       | 2 +-
 src/features/auth/pages/ResetPasswordPage.client.js  | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/features/auth/AuthPage.server.js b/src/features/auth/AuthPage.server.js
index 47cb7c4..3f7caf0 100644
--- a/src/features/auth/AuthPage.server.js
+++ b/src/features/auth/AuthPage.server.js
@@ -14,7 +14,7 @@ export default async function AuthPage({ params, searchParams }) {
   const session = await getSession();
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4 md:p-8 bg-neutral-50 dark:bg-black">
+    <div className="min-h-dvh flex flex-col items-center justify-start sm:justify-center px-4 py-10 sm:py-8 md:p-8 bg-neutral-50 dark:bg-black">
       <div className="max-w-md w-full">
         <AuthPageClient
           params={params}
diff --git a/src/features/auth/pages/ConfirmEmailPage.client.js b/src/features/auth/pages/ConfirmEmailPage.client.js
index d84002e..ffd7727 100644
--- a/src/features/auth/pages/ConfirmEmailPage.client.js
+++ b/src/features/auth/pages/ConfirmEmailPage.client.js
@@ -80,7 +80,7 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
   console.log('ConfirmEmailPage render', { success, error, isLoading, hasVerified });
 
   return (
-    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
+    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md mx-auto">
       <AuthPageHeader title="Vérification de l'e-mail" description="Nous vérifions votre adresse e-mail..." />
 
       {isLoading && (
diff --git a/src/features/auth/pages/ForgotPasswordPage.client.js b/src/features/auth/pages/ForgotPasswordPage.client.js
index 188f0c3..68a4f64 100644
--- a/src/features/auth/pages/ForgotPasswordPage.client.js
+++ b/src/features/auth/pages/ForgotPasswordPage.client.js
@@ -45,7 +45,7 @@ export default function ForgotPasswordPage({ onSubmit, onNavigate, currentUser =
   }
 
   return (
-    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
+    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md mx-auto">
       <AuthPageHeader title="Mot de passe oublié" description="Entrez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe." />
 
       {currentUser && (
diff --git a/src/features/auth/pages/LoginPage.client.js b/src/features/auth/pages/LoginPage.client.js
index f64fd82..4fa2aad 100644
--- a/src/features/auth/pages/LoginPage.client.js
+++ b/src/features/auth/pages/LoginPage.client.js
@@ -67,7 +67,7 @@ export default function LoginPage({ onSubmit, onNavigate, onSetSessionCookie, re
   };
 
   return (
-    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
+    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md mx-auto">
       <AuthPageHeader title="Connexion" description="Veuillez vous connecter pour continuer." />
 
       {currentUser && (
diff --git a/src/features/auth/pages/LogoutPage.client.js b/src/features/auth/pages/LogoutPage.client.js
index 47fa54d..430b59d 100644
--- a/src/features/auth/pages/LogoutPage.client.js
+++ b/src/features/auth/pages/LogoutPage.client.js
@@ -42,7 +42,7 @@ export default function LogoutPage({ onLogout, onSetSessionCookie }) {
   };
 
   return (
-    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
+    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md mx-auto">
       <AuthPageHeader title="Prêt à vous déconnecter ?" description="Cela mettra fin à votre session et vous déconnectera de votre compte." />
 
       {success && (
diff --git a/src/features/auth/pages/RegisterPage.client.js b/src/features/auth/pages/RegisterPage.client.js
index 771e6e5..85a1701 100644
--- a/src/features/auth/pages/RegisterPage.client.js
+++ b/src/features/auth/pages/RegisterPage.client.js
@@ -97,7 +97,7 @@ export default function RegisterPage({ onSubmit, onNavigate, currentUser = null
   }
 
   return (
-    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
+    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md mx-auto">
       <AuthPageHeader title="Créer un compte" description="Inscrivez-vous pour commencer." />
 
       {currentUser && (
diff --git a/src/features/auth/pages/ResetPasswordPage.client.js b/src/features/auth/pages/ResetPasswordPage.client.js
index 14387ac..1e1cd42 100644
--- a/src/features/auth/pages/ResetPasswordPage.client.js
+++ b/src/features/auth/pages/ResetPasswordPage.client.js
@@ -65,7 +65,7 @@ export default function ResetPasswordPage({ onSubmit, onNavigate, email, token }
   }
 
   return (
-    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
+    <Card variant="default" padding="md" spacing="none" className="w-full max-w-md mx-auto">
       <AuthPageHeader title="Réinitialiser le mot de passe" description="Saisissez votre nouveau mot de passe ci-dessous." />
 
       {error && !success && (