espace-paie-odentas/FIX_2FA_INPUT_SIZE.md

Correction : Encadrés 2FA trop grands sur la page de connexion

🐛 Problème

Sur la page de connexion (/signin), lors de la saisie du code 2FA (authentification à deux facteurs), les encadrés pour les 6 chiffres étaient beaucoup trop grands par rapport aux encadrés utilisés pour le code OTP par email.

🔍 Cause

Les inputs du 2FA utilisaient la classe CSS flex-1 qui les rendait extensibles pour remplir tout l'espace disponible, combiné avec justify-between au lieu de justify-center.

Code problématique :

<div className="flex justify-between gap-1 sm:gap-2">
  <input
    className="flex-1 h-12 sm:h-14 text-center text-xl sm:text-2xl font-mono border-2 border-[#6366f1]/40 rounded-xl bg-white/30 text-[#171424] focus:outline-none focus:ring-2 focus:ring-[#6366f1] shadow-md transition"
  />
</div>

✅ Solution

Alignement du style des inputs 2FA sur celui des inputs OTP en utilisant :

• Des largeurs fixes (w-12 sm:w-14 + style inline width: 3rem)
• justify-center au lieu de justify-between
• Les mêmes classes de style pour une apparence cohérente

Changements apportés

Fichier : /app/signin/page.tsx

Avant :

<div className="flex justify-between gap-1 sm:gap-2">
  <input
    className="flex-1 h-12 sm:h-14 text-center text-xl sm:text-2xl font-mono border-2 border-[#6366f1]/40 rounded-xl bg-white/30 text-[#171424] focus:outline-none focus:ring-2 focus:ring-[#6366f1] shadow-md transition"
  />
</div>

Après :

<div className="flex justify-center gap-1 sm:gap-2">
  <input
    className="w-12 sm:w-14 h-14 sm:h-16 text-center text-2xl sm:text-3xl rounded-xl sm:rounded-2xl bg-white/70 border-2 border-[#6366f1]/40 text-[#171424] placeholder-[#171424]/40 focus:outline-none focus:ring-2 focus:ring-[#6366f1]/40 shadow-lg transition flex-shrink-0"
    style={{ fontWeight: 700, letterSpacing: "0.1em", width: "3rem", minWidth: "3rem", maxWidth: "3rem" }}
  />
</div>

🎯 Améliorations

• ✅ Encadrés 2FA de taille fixe (3rem / ~48px)
• ✅ Cohérence visuelle entre OTP et 2FA
• ✅ Centrés sur la page au lieu d'être étirés
• ✅ Même espacement et style que les inputs OTP
• ✅ Meilleure lisibilité et UX

📸 Différences visuelles

Avant

• Inputs 2FA : Largeur flexible (trop large)
• Distribution : justify-between (étalés sur toute la largeur)

Après

• Inputs 2FA : Largeur fixe de 3rem chacun
• Distribution : justify-center (centrés et groupés)
• Style identique aux inputs OTP pour cohérence