style: login card alignments

Author: lorenzocorallo

src/app/(auth)/login/login-form.tsx

@@ -16,7 +16,7 @@ export default function LoginForm() {
   const [sent, setSent] = useState(false)
 
   return (
-    <div className="flex flex-col gap-6 py-2 px-2">
+    <div className="flex flex-col gap-6">
       {!sent ? (
         <EmailCard email={email} onChange={(v) => setEmail(v)} onSend={() => setSent(true)} />
       ) : (

src/app/(auth)/login/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation"
-import { Card } from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { getServerSession } from "@/server/auth"
 import LoginForm from "./login-form"
 
@@ -10,9 +10,15 @@ export default async function Page() {
   return (
     <main className="w-full flex flex-col flex-1 items-center justify-center max-w-3xl">
       <Card className="flex w-full bg-background flex-col items-center p-6">
-        <h1 className="text-2xl font-bold mb-2 py-1">Login</h1>
-        <p className="text-lg md:text-sm text-muted-foreground mb-6">Login with Email OTP or Passkey</p>
-        <LoginForm />
+        <CardHeader className="w-full">
+          <CardTitle className="text-2xl font-bold py-1">Login</CardTitle>
+          <CardDescription className="text-lg md:text-sm text-muted-foreground">
+            Login with Email OTP or Passkey
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="py-6">
+          <LoginForm />
+        </CardContent>
       </Card>
     </main>
   )