OTP text center fix

Author: smgv

packages/modal/src/ui/components/Login/LoginOtp/LoginOtp.tsx

@@ -45,15 +45,15 @@ function OtpInput(props: OtpInputProps) {
       </div>
       <div className="-w3a--mt-10 w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4">
         <img src={getIcons(isMobileOtp ? "sms-otp-light" : "email-otp-light")} alt="otp" className="w3a--size-auto" />
-        <div className="-w3a--mt-6 w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2">
+        <div className="w3a--mx-auto -w3a--mt-6 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2">
           <p className="w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white">
             {isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")}
           </p>
-          <div className="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1">
-            <p className="w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
+          <div className="w3a--mx-auto w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1">
+            <p className="w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
               {isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")}
             </p>
-            <p className="w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
+            <p className="w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
               {isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", { email: parsedLoginHint })}
             </p>
           </div>