From 45cbfb5ecb194eb9cdcee5a9cf8b4f79c20c1444 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 11 Feb 2026 05:29:19 +0300
Subject: [PATCH] feat: compact login page with collapsible email, icon OAuth
 row, safe areas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- OAuth providers: horizontal icon row with labels instead of stacked full-width buttons
- Email form: collapsed by default behind "Войти по Email" pill toggle with smooth CSS Grid animation
- Telegram safe areas: use useTelegramSDK() for top/bottom insets with env() CSS fallback
- Compact layout: smaller logo (48x48), tighter spacing, fits on one mobile screen
- Language switcher offset by safe area to avoid Telegram header overlap
- 100dvh for proper Telegram Mini App viewport handling
---
 src/pages/Login.tsx | 441 +++++++++++++++++++++++++-------------------
 1 file changed, 253 insertions(+), 188 deletions(-)

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index e3c71bf..8c534e8 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -15,7 +15,7 @@ import {
   type EmailAuthEnabled,
 } from '../api/branding';
 import { getAndClearReturnUrl } from '../utils/token';
-import { isInTelegramWebApp, getTelegramInitData } from '../hooks/useTelegramSDK';
+import { isInTelegramWebApp, getTelegramInitData, useTelegramSDK } from '../hooks/useTelegramSDK';
 import LanguageSwitcher from '../components/LanguageSwitcher';
 import TelegramLoginButton from '../components/TelegramLoginButton';
 import OAuthProviderIcon from '../components/OAuthProviderIcon';
@@ -54,6 +54,12 @@ export default function Login() {
   const [forgotPasswordSent, setForgotPasswordSent] = useState(false);
   const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false);
   const [forgotPasswordError, setForgotPasswordError] = useState('');
+  const [showEmailForm, setShowEmailForm] = useState(() => !!referralCode);
+
+  // Telegram safe area insets
+  const { safeAreaInset, contentSafeAreaInset } = useTelegramSDK();
+  const safeTop = Math.max(safeAreaInset.top, contentSafeAreaInset.top);
+  const safeBottom = Math.max(safeAreaInset.bottom, contentSafeAreaInset.bottom);
 
   // Получаем URL для возврата после авторизации
   const getReturnUrl = useCallback(() => {
@@ -313,27 +319,40 @@ export default function Login() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+    <div
+      className="flex min-h-[100dvh] items-center justify-center px-4 sm:px-6 lg:px-8"
+      style={{
+        paddingTop:
+          safeTop > 0 ? `${safeTop + 16}px` : 'calc(1rem + env(safe-area-inset-top, 0px))',
+        paddingBottom:
+          safeBottom > 0 ? `${safeBottom + 16}px` : 'calc(1rem + env(safe-area-inset-bottom, 0px))',
+      }}
+    >
       {/* Background gradient */}
       <div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" />
       <div className="fixed inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent-500/10 via-transparent to-transparent" />
 
       {/* Language switcher */}
-      <div className="fixed right-4 top-4 z-50">
+      <div
+        className="fixed right-3 z-50"
+        style={{
+          top: safeTop > 0 ? `${safeTop + 12}px` : 'calc(12px + env(safe-area-inset-top, 0px))',
+        }}
+      >
         <LanguageSwitcher />
       </div>
 
-      <div className="relative w-full max-w-md space-y-8">
-        {/* Logo */}
+      <div className="relative w-full max-w-md space-y-5">
+        {/* Logo & branding */}
         <div className="text-center">
-          <div className="relative mx-auto mb-6 flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl border border-dark-700/50 bg-dark-800/80 shadow-md">
-            {/* Always show letter as fallback */}
+          <div className="relative mx-auto mb-3 flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl border border-dark-700/50 bg-dark-800/80 shadow-md">
+            {/* Letter fallback */}
             <span
-              className={`absolute text-2xl font-bold text-accent-400 transition-opacity duration-200 ${branding?.has_custom_logo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}
+              className={`absolute text-lg font-bold text-accent-400 transition-opacity duration-200 ${branding?.has_custom_logo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}
             >
               {appLogo}
             </span>
-            {/* Logo image with smooth fade-in */}
+            {/* Logo image */}
             {branding?.has_custom_logo && logoUrl && (
               <img
                 src={logoUrl}
@@ -343,15 +362,15 @@ export default function Login() {
               />
             )}
           </div>
-          {appName && <h1 className="text-3xl font-bold text-dark-50">{appName}</h1>}
-          <p className="mt-2 text-dark-400">{t('auth.loginSubtitle')}</p>
+          {appName && <h1 className="text-2xl font-bold text-dark-50">{appName}</h1>}
+          <p className="mt-1 text-sm text-dark-400">{t('auth.loginSubtitle')}</p>
 
-          {/* Referral Banner - only show when email auth is enabled */}
+          {/* Referral Banner */}
           {referralCode && isEmailAuthEnabled && (
-            <div className="mt-4 rounded-xl border border-accent-500/30 bg-accent-500/10 p-3">
-              <div className="flex items-center gap-2 text-accent-400">
+            <div className="mt-3 rounded-xl border border-accent-500/30 bg-accent-500/10 p-2.5">
+              <div className="flex items-center justify-center gap-2 text-accent-400">
                 <svg
-                  className="h-5 w-5 flex-shrink-0"
+                  className="h-4 w-4 flex-shrink-0"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -363,7 +382,7 @@ export default function Login() {
                     d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
                   />
                 </svg>
-                <span className="text-sm font-medium">{t('auth.referralInvite')}</span>
+                <span className="text-xs font-medium">{t('auth.referralInvite')}</span>
               </div>
             </div>
           )}
@@ -372,9 +391,9 @@ export default function Login() {
         {/* Check Email Screen */}
         {registeredEmail ? (
           <div className="card text-center">
-            <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-success-500/20">
+            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-success-500/20">
               <svg
-                className="h-8 w-8 text-success-400"
+                className="h-7 w-7 text-success-400"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -387,14 +406,14 @@ export default function Login() {
                 />
               </svg>
             </div>
-            <h2 className="mb-2 text-xl font-bold text-dark-50">
+            <h2 className="mb-2 text-lg font-bold text-dark-50">
               {t('auth.checkEmail', 'Check your email')}
             </h2>
-            <p className="mb-4 text-dark-400">
+            <p className="mb-3 text-sm text-dark-400">
               {t('auth.verificationSent', 'We sent a verification link to:')}
             </p>
-            <p className="mb-6 font-medium text-accent-400">{registeredEmail}</p>
-            <p className="mb-6 text-sm text-dark-500">
+            <p className="mb-4 text-sm font-medium text-accent-400">{registeredEmail}</p>
+            <p className="mb-5 text-xs text-dark-500">
               {t(
                 'auth.clickLinkToVerify',
                 'Click the link in the email to verify your account and log in.',
@@ -411,31 +430,31 @@ export default function Login() {
             </button>
           </div>
         ) : (
-          /* Card */
+          /* Main auth card */
           <div className="card">
             {error && (
-              <div className="mb-6 rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-3 text-sm text-error-400">
+              <div className="mb-4 rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm text-error-400">
                 {error}
               </div>
             )}
 
             {/* Telegram auth section */}
-            <div className="space-y-6">
-              <p className="text-center text-sm text-dark-400">{t('auth.registerHint')}</p>
+            <div className="space-y-3">
+              <p className="text-center text-xs text-dark-500">{t('auth.registerHint')}</p>
 
               {isLoading && isTelegramWebApp ? (
-                <div className="py-8 text-center">
+                <div className="py-6 text-center">
                   <div className="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
                   <p className="text-sm text-dark-400">{t('auth.authenticating')}</p>
                 </div>
               ) : isTelegramWebApp && error ? (
-                <div className="space-y-4 text-center">
+                <div className="space-y-3 text-center">
                   <button
                     onClick={handleRetryTelegramAuth}
-                    className="btn-primary mx-auto flex items-center gap-2 px-6 py-3"
+                    className="btn-primary mx-auto flex items-center gap-2 px-5 py-2.5"
                   >
                     <svg
-                      className="h-5 w-5"
+                      className="h-4 w-4"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -461,185 +480,231 @@ export default function Login() {
               )}
             </div>
 
-            {/* OAuth providers section */}
+            {/* OAuth providers - compact icon row */}
             {oauthProviders.length > 0 && (
               <>
-                <div className="my-6 flex items-center gap-3">
+                <div className="my-4 flex items-center gap-3">
                   <div className="h-px flex-1 bg-dark-700" />
                   <span className="text-xs text-dark-500">{t('auth.or', 'or')}</span>
                   <div className="h-px flex-1 bg-dark-700" />
                 </div>
-                <div className="space-y-3">
+                <div className="flex items-stretch gap-2">
                   {oauthProviders.map((provider) => (
                     <button
                       key={provider.name}
                       type="button"
                       onClick={() => handleOAuthLogin(provider.name)}
                       disabled={oauthLoading !== null}
-                      className="hover:bg-dark-750 flex w-full items-center justify-center gap-3 rounded-xl border border-dark-700 bg-dark-800 px-4 py-3 text-sm font-medium text-dark-100 transition-colors hover:border-dark-600 disabled:opacity-50"
+                      className="flex flex-1 flex-col items-center justify-center gap-1.5 rounded-xl border border-dark-700 bg-dark-800/80 py-2.5 transition-all hover:border-dark-600 hover:bg-dark-700 disabled:opacity-50"
+                      title={provider.display_name}
                     >
                       {oauthLoading === provider.name ? (
                         <span className="h-5 w-5 animate-spin rounded-full border-2 border-dark-400 border-t-white" />
                       ) : (
                         <OAuthProviderIcon provider={provider.name} className="h-5 w-5" />
                       )}
-                      {t(
-                        `auth.continueWith${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`,
-                        `Continue with ${provider.display_name}`,
-                      )}
+                      <span className="text-[10px] leading-none text-dark-500">
+                        {provider.display_name}
+                      </span>
                     </button>
                   ))}
                 </div>
               </>
             )}
 
-            {/* Email auth section - only when enabled */}
+            {/* Email auth section - collapsible */}
             {isEmailAuthEnabled && (
               <>
-                {/* Divider */}
-                <div className="my-6 flex items-center gap-3">
+                <div className="my-4 flex items-center gap-3">
                   <div className="h-px flex-1 bg-dark-700" />
-                  <span className="text-xs text-dark-500">{t('auth.or', 'or')}</span>
+                  <button
+                    type="button"
+                    onClick={() => setShowEmailForm(!showEmailForm)}
+                    className="flex items-center gap-1.5 rounded-full border border-dark-700 bg-dark-800/60 px-3.5 py-1.5 text-xs font-medium text-dark-300 transition-all hover:border-dark-600 hover:bg-dark-700 hover:text-dark-200"
+                  >
+                    <svg
+                      className="h-3.5 w-3.5 text-dark-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={1.5}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+                      />
+                    </svg>
+                    <span>{t('auth.loginWithEmail')}</span>
+                    <svg
+                      className={`h-3 w-3 text-dark-400 transition-transform duration-300 ${showEmailForm ? 'rotate-180' : ''}`}
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2.5}
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
                   <div className="h-px flex-1 bg-dark-700" />
                 </div>
 
-                <div className="space-y-5">
-                  {/* Login / Register toggle */}
-                  <div className="flex rounded-lg bg-dark-800 p-1">
-                    <button
-                      type="button"
-                      className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
-                        authMode === 'login'
-                          ? 'bg-accent-500 text-white'
-                          : 'text-dark-400 hover:text-dark-200'
-                      }`}
-                      onClick={() => setAuthMode('login')}
-                    >
-                      {t('auth.login')}
-                    </button>
-                    <button
-                      type="button"
-                      className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
-                        authMode === 'register'
-                          ? 'bg-accent-500 text-white'
-                          : 'text-dark-400 hover:text-dark-200'
-                      }`}
-                      onClick={() => setAuthMode('register')}
-                    >
-                      {t('auth.register', 'Register')}
-                    </button>
+                {/* Collapsible email form */}
+                <div
+                  className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${
+                    showEmailForm ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                  }`}
+                >
+                  <div
+                    className={`overflow-hidden transition-opacity duration-300 ${
+                      showEmailForm ? 'opacity-100' : 'opacity-0'
+                    }`}
+                  >
+                    <div className="space-y-4 pb-1 pt-1">
+                      {/* Login / Register toggle */}
+                      <div className="flex rounded-lg bg-dark-800 p-1">
+                        <button
+                          type="button"
+                          className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
+                            authMode === 'login'
+                              ? 'bg-accent-500 text-white'
+                              : 'text-dark-400 hover:text-dark-200'
+                          }`}
+                          onClick={() => setAuthMode('login')}
+                        >
+                          {t('auth.login')}
+                        </button>
+                        <button
+                          type="button"
+                          className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
+                            authMode === 'register'
+                              ? 'bg-accent-500 text-white'
+                              : 'text-dark-400 hover:text-dark-200'
+                          }`}
+                          onClick={() => setAuthMode('register')}
+                        >
+                          {t('auth.register', 'Register')}
+                        </button>
+                      </div>
+
+                      <form className="space-y-3" onSubmit={handleEmailSubmit}>
+                        {/* First name field - only for registration */}
+                        {authMode === 'register' && (
+                          <div>
+                            <label htmlFor="firstName" className="label">
+                              {t('auth.firstName', 'First Name')}
+                            </label>
+                            <input
+                              id="firstName"
+                              name="firstName"
+                              type="text"
+                              autoComplete="given-name"
+                              className="input"
+                              placeholder={t('auth.firstNamePlaceholder', 'Your name (optional)')}
+                              value={firstName}
+                              onChange={(e) => setFirstName(e.target.value)}
+                            />
+                          </div>
+                        )}
+
+                        <div>
+                          <label htmlFor="email" className="label">
+                            {t('auth.email')}
+                          </label>
+                          <input
+                            id="email"
+                            name="email"
+                            type="email"
+                            autoComplete="email"
+                            required
+                            className="input"
+                            placeholder="you@example.com"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                          />
+                        </div>
+
+                        <div>
+                          <label htmlFor="password" className="label">
+                            {t('auth.password')}
+                          </label>
+                          <input
+                            id="password"
+                            name="password"
+                            type="password"
+                            autoComplete={
+                              authMode === 'login' ? 'current-password' : 'new-password'
+                            }
+                            required
+                            className="input"
+                            placeholder="••••••••"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                          />
+                        </div>
+
+                        {/* Confirm password - only for registration */}
+                        {authMode === 'register' && (
+                          <div>
+                            <label htmlFor="confirmPassword" className="label">
+                              {t('auth.confirmPassword', 'Confirm Password')}
+                            </label>
+                            <input
+                              id="confirmPassword"
+                              name="confirmPassword"
+                              type="password"
+                              autoComplete="new-password"
+                              required
+                              className="input"
+                              placeholder="••••••••"
+                              value={confirmPassword}
+                              onChange={(e) => setConfirmPassword(e.target.value)}
+                            />
+                          </div>
+                        )}
+
+                        <button
+                          type="submit"
+                          disabled={isLoading}
+                          className="btn-primary w-full py-2.5"
+                        >
+                          {isLoading ? (
+                            <span className="flex items-center justify-center gap-2">
+                              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                              {t('common.loading')}
+                            </span>
+                          ) : authMode === 'login' ? (
+                            t('auth.login')
+                          ) : (
+                            t('auth.register', 'Register')
+                          )}
+                        </button>
+                      </form>
+
+                      {/* Verification notice for registration */}
+                      {authMode === 'register' && (
+                        <p className="text-center text-xs text-dark-500">
+                          {t(
+                            'auth.verificationEmailNotice',
+                            'After registration, a verification email will be sent to your address',
+                          )}
+                        </p>
+                      )}
+
+                      {/* Forgot password link - only for login */}
+                      {authMode === 'login' && (
+                        <div className="text-center">
+                          <button
+                            type="button"
+                            onClick={() => setShowForgotPassword(true)}
+                            className="text-sm text-accent-400 transition-colors hover:text-accent-300"
+                          >
+                            {t('auth.forgotPassword', 'Forgot password?')}
+                          </button>
+                        </div>
+                      )}
+                    </div>
                   </div>
-
-                  <form className="space-y-4" onSubmit={handleEmailSubmit}>
-                    {/* First name field - only for registration */}
-                    {authMode === 'register' && (
-                      <div>
-                        <label htmlFor="firstName" className="label">
-                          {t('auth.firstName', 'First Name')}
-                        </label>
-                        <input
-                          id="firstName"
-                          name="firstName"
-                          type="text"
-                          autoComplete="given-name"
-                          className="input"
-                          placeholder={t('auth.firstNamePlaceholder', 'Your name (optional)')}
-                          value={firstName}
-                          onChange={(e) => setFirstName(e.target.value)}
-                        />
-                      </div>
-                    )}
-
-                    <div>
-                      <label htmlFor="email" className="label">
-                        {t('auth.email')}
-                      </label>
-                      <input
-                        id="email"
-                        name="email"
-                        type="email"
-                        autoComplete="email"
-                        required
-                        className="input"
-                        placeholder="you@example.com"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                      />
-                    </div>
-
-                    <div>
-                      <label htmlFor="password" className="label">
-                        {t('auth.password')}
-                      </label>
-                      <input
-                        id="password"
-                        name="password"
-                        type="password"
-                        autoComplete={authMode === 'login' ? 'current-password' : 'new-password'}
-                        required
-                        className="input"
-                        placeholder="••••••••"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                      />
-                    </div>
-
-                    {/* Confirm password - only for registration */}
-                    {authMode === 'register' && (
-                      <div>
-                        <label htmlFor="confirmPassword" className="label">
-                          {t('auth.confirmPassword', 'Confirm Password')}
-                        </label>
-                        <input
-                          id="confirmPassword"
-                          name="confirmPassword"
-                          type="password"
-                          autoComplete="new-password"
-                          required
-                          className="input"
-                          placeholder="••••••••"
-                          value={confirmPassword}
-                          onChange={(e) => setConfirmPassword(e.target.value)}
-                        />
-                      </div>
-                    )}
-
-                    <button type="submit" disabled={isLoading} className="btn-primary w-full py-3">
-                      {isLoading ? (
-                        <span className="flex items-center justify-center gap-2">
-                          <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                          {t('common.loading')}
-                        </span>
-                      ) : authMode === 'login' ? (
-                        t('auth.login')
-                      ) : (
-                        t('auth.register', 'Register')
-                      )}
-                    </button>
-                  </form>
-
-                  {/* Verification notice for registration */}
-                  {authMode === 'register' && (
-                    <p className="text-center text-xs text-dark-500">
-                      {t(
-                        'auth.verificationEmailNotice',
-                        'After registration, a verification email will be sent to your address',
-                      )}
-                    </p>
-                  )}
-
-                  {/* Forgot password link - only for login */}
-                  {authMode === 'login' && (
-                    <div className="space-y-2 text-center">
-                      <button
-                        type="button"
-                        onClick={() => setShowForgotPassword(true)}
-                        className="text-sm text-accent-400 transition-colors hover:text-accent-300"
-                      >
-                        {t('auth.forgotPassword', 'Forgot password?')}
-                      </button>
-                    </div>
-                  )}
                 </div>
               </>
             )}
@@ -651,10 +716,10 @@ export default function Login() {
       {showForgotPassword && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="absolute inset-0 bg-black/60" onClick={closeForgotPasswordModal} />
-          <div className="relative w-full max-w-md rounded-2xl border border-dark-700 bg-dark-900 p-6">
+          <div className="relative w-full max-w-sm rounded-2xl border border-dark-700 bg-dark-900 p-5">
             <button
               onClick={closeForgotPasswordModal}
-              className="absolute right-4 top-4 text-dark-400 transition-colors hover:text-dark-200"
+              className="absolute right-3 top-3 text-dark-400 transition-colors hover:text-dark-200"
             >
               <svg
                 className="h-5 w-5"
@@ -669,9 +734,9 @@ export default function Login() {
 
             {forgotPasswordSent ? (
               <div className="text-center">
-                <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-success-500/20">
+                <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-success-500/20">
                   <svg
-                    className="h-8 w-8 text-success-400"
+                    className="h-7 w-7 text-success-400"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -684,10 +749,10 @@ export default function Login() {
                     />
                   </svg>
                 </div>
-                <h3 className="mb-2 text-xl font-bold text-dark-50">
+                <h3 className="mb-2 text-lg font-bold text-dark-50">
                   {t('auth.checkEmail', 'Check your email')}
                 </h3>
-                <p className="mb-4 text-dark-400">
+                <p className="mb-4 text-sm text-dark-400">
                   {t(
                     'auth.passwordResetSent',
                     'If an account exists with this email, we sent password reset instructions.',
@@ -699,17 +764,17 @@ export default function Login() {
               </div>
             ) : (
               <>
-                <h3 className="mb-2 text-xl font-bold text-dark-50">
+                <h3 className="mb-2 text-lg font-bold text-dark-50">
                   {t('auth.forgotPassword', 'Forgot password?')}
                 </h3>
-                <p className="mb-6 text-dark-400">
+                <p className="mb-4 text-sm text-dark-400">
                   {t(
                     'auth.forgotPasswordHint',
                     'Enter your email and we will send you instructions to reset your password.',
                   )}
                 </p>
 
-                <form onSubmit={handleForgotPassword} className="space-y-4">
+                <form onSubmit={handleForgotPassword} className="space-y-3">
                   <div>
                     <label htmlFor="forgotEmail" className="label">
                       Email
@@ -726,7 +791,7 @@ export default function Login() {
                   </div>
 
                   {forgotPasswordError && (
-                    <div className="rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-3 text-sm text-error-400">
+                    <div className="rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm text-error-400">
                       {forgotPasswordError}
                     </div>
                   )}