manual improvement 1

client/src/components/OtpInput/OtpInput.tsx

@@ -20,7 +20,13 @@ export interface OtpInputProps {
 }
 
 const DEFAULT_LENGTH = 5;
-const BOX_SIZE = 48;
+/**
+ * The box is sized in `ch`-free absolute terms but must survive 6 boxes + gaps inside the
+ * ~480px app frame minus the card padding, so it shrinks rather than overflowing.
+ */
+const BOX_MIN_SIZE = 40;
+const BOX_MAX_SIZE = 52;
+const BOX_GAP = 1;
 
 /**
  * One-time-code input: `length` single-digit boxes with auto-advance, backspace-to-previous,
@@ -110,10 +116,20 @@ const OtpInput: FunctionComponent<OtpInputProps> = ({
   };
 
   return (
-    <Stack direction="row" spacing={1} dir="ltr" role="group" aria-label={ariaLabel} sx={{ justifyContent: 'center' }}>
+    // `gap`, never Stack's `spacing`: spacing compiles to a directional margin that the RTL Emotion
+    // cache mirrors, while this group is force-`dir="ltr"` so the code reads left-to-right. The two
+    // disagreed on /fa and collapsed the gap between the first two boxes while doubling it at the end.
+    <Stack
+      direction="row"
+      dir="ltr"
+      role="group"
+      aria-label={ariaLabel}
+      sx={{ justifyContent: 'center', gap: BOX_GAP, width: '100%' }}
+    >
       {chars.map((char, index) => (
         <TextField
           key={index}
+          sx={{ flex: `1 1 ${BOX_MIN_SIZE}px`, minWidth: BOX_MIN_SIZE, maxWidth: BOX_MAX_SIZE }}
           value={char}
           disabled={disabled}
           error={error}
@@ -130,7 +146,7 @@ const OtpInput: FunctionComponent<OtpInputProps> = ({
               // Lets iOS/Android offer the SMS code as a keyboard suggestion even without WebOTP.
               autoComplete: 'one-time-code',
               'aria-label': `${ariaLabel ?? 'digit'} ${index + 1}`,
-              style: { textAlign: 'center', fontSize: '1.25rem', width: BOX_SIZE, padding: 8 },
+              style: { textAlign: 'center', fontSize: '1.25rem', padding: 12, width: '100%' },
             },
           }}
         />