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
This commit is contained in:
@@ -14,7 +14,7 @@ export default async function AuthPage({ params, searchParams }) {
|
|||||||
const session = await getSession();
|
const session = await getSession();
|
||||||
|
|
||||||
return (
|
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">
|
<div className="max-w-md w-full">
|
||||||
<AuthPageClient
|
<AuthPageClient
|
||||||
params={params}
|
params={params}
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
|
|||||||
console.log('ConfirmEmailPage render', { success, error, isLoading, hasVerified });
|
console.log('ConfirmEmailPage render', { success, error, isLoading, hasVerified });
|
||||||
|
|
||||||
return (
|
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..." />
|
<AuthPageHeader title="Vérification de l'e-mail" description="Nous vérifions votre adresse e-mail..." />
|
||||||
|
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export default function ForgotPasswordPage({ onSubmit, onNavigate, currentUser =
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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." />
|
<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 && (
|
{currentUser && (
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export default function LoginPage({ onSubmit, onNavigate, onSetSessionCookie, re
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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." />
|
<AuthPageHeader title="Connexion" description="Veuillez vous connecter pour continuer." />
|
||||||
|
|
||||||
{currentUser && (
|
{currentUser && (
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export default function LogoutPage({ onLogout, onSetSessionCookie }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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." />
|
<AuthPageHeader title="Prêt à vous déconnecter ?" description="Cela mettra fin à votre session et vous déconnectera de votre compte." />
|
||||||
|
|
||||||
{success && (
|
{success && (
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ export default function RegisterPage({ onSubmit, onNavigate, currentUser = null
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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." />
|
<AuthPageHeader title="Créer un compte" description="Inscrivez-vous pour commencer." />
|
||||||
|
|
||||||
{currentUser && (
|
{currentUser && (
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export default function ResetPasswordPage({ onSubmit, onNavigate, email, token }
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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." />
|
<AuthPageHeader title="Réinitialiser le mot de passe" description="Saisissez votre nouveau mot de passe ci-dessous." />
|
||||||
|
|
||||||
{error && !success && (
|
{error && !success && (
|
||||||
|
|||||||
Reference in New Issue
Block a user