manual improvement 1

client/src/components/auth/OtpStep.tsx

@@ -102,6 +102,9 @@ const OtpStep: FunctionComponent<OtpStepProps> = ({
         </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {t.rich('otp_sent_to', {
+            // A rich-text TAG (`<phone></phone>` in both message files), not a `{phone}` value — a
+            // function passed for a value placeholder is handed straight to React as a child, which
+            // is the "Functions are not valid as a React child" crash this replaced.
             // <bdi dir="ltr"> isolates the masked number so the RTL sentence's bidi algorithm
             // never reorders the digit/bullet runs around it (the classic digits-around-neutrals bug).
             phone: () => (
@@ -149,8 +152,8 @@ const OtpStep: FunctionComponent<OtpStepProps> = ({
         {resendDisabled && countdown.isActive && !locked ? (
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t.rich('resend_in', {
-              // Same bidi-isolation reasoning as the phone echo above — keeps mm:ss reading
-              // left-to-right (in Persian digits on /fa) inside the RTL sentence.
+              // Same tag-not-value rule and bidi-isolation reasoning as the phone echo above —
+              // keeps mm:ss reading left-to-right (in Persian digits on /fa) inside the RTL sentence.
               time: () => (
                 <Box component="bdi" dir="ltr">
                   {formatClock(countdown.seconds, locale)}