From 501cf28b9a60801f51fa6efadd7c55e85afafe2a Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Thu, 18 Jun 2026 17:53:01 +0330
Subject: [PATCH] fix(auth): 6-digit OTP in LoginRequiredDialog

The login-required popup still rendered a 4-slot OTP (maxLength=4, gated on
length===4) while the main login page already used 6. Users who triggered
login via the dialog saw the old 4-digit code. Match login.tsx: 6 slots,
length===6, same slot sizing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/components/LoginRequiredDialog.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/components/LoginRequiredDialog.tsx b/app/components/LoginRequiredDialog.tsx
index 376bb32..d44a717 100644
--- a/app/components/LoginRequiredDialog.tsx
+++ b/app/components/LoginRequiredDialog.tsx
@@ -166,7 +166,7 @@ export function LoginRequiredDialog({
               </div>
               <div className="w-full flex justify-center">
                 <InputOTP
-                  maxLength={4}
+                  maxLength={6}
                   onComplete={(finalValue) => {
                     const convertedValue = convertPersianToEnglish(finalValue);
                     setOtpValue(convertedValue);
@@ -177,17 +177,19 @@ export function LoginRequiredDialog({
                     setOtpValue(convertedValue);
                   }}
                 >
-                  <InputOTPGroup dir="ltr" className="gap-4">
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
+                  <InputOTPGroup dir="ltr" className="gap-1.5 sm:gap-3">
+                    <InputOTPSlot index={0} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={1} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={2} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={3} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={4} className="!w-9 sm:!w-12" />
+                    <InputOTPSlot index={5} className="!w-9 sm:!w-12" />
                   </InputOTPGroup>
                 </InputOTP>
               </div>
               <div className="gap-3 w-full flex flex-col items-center">
                 <Button
-                  disabled={verifyOtpMutation.isPending || !(otpValue.length === 4)}
+                  disabled={verifyOtpMutation.isPending || !(otpValue.length === 6)}
                   className="w-full"
                   size="xl"
                   variant="dark"