Merge pull request #441 from GurukiranP/ES-296

[ES-296]
mosip · Oct 19, 2023 · 72e54f5 · 72e54f5
2 parents b9372d7 + 6c7b608
commit 72e54f5
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/oidc-ui/src/components/OtpVerify.js b/oidc-ui/src/components/OtpVerify.js
@@ -211,7 +211,20 @@ export default function OtpVerify({
       setStatus({ state: states.ERROR, msg: "" });
     }
   };
+
+  let styles = {
+    width: "40px",
+    height: "40px",
+    margin: "0 5px",
+    border: "",
+    borderBottom: "2px solid #0284c7",
+    color: "#0284c7"
+  };
 
+  if(window.screen.availWidth <= 375) {
+    styles = {...styles, width: "2em"}
+  }
+
   return (
     <>
       <form className="mt-2 space-y-2" onSubmit={handleSubmit}>
@@ -246,14 +259,7 @@ export default function OtpVerify({
             type="numeric"
             inputMode="number"
             style={{ padding: "5px 0px" }}
-            inputStyle={{
-              width: "40px",
-              height: "40px",
-              margin: "0 5px",
-              border: "",
-              borderBottom: "2px solid #0284c7",
-              color: "#0284c7",
-            }}
+            inputStyle={styles}
             inputFocusStyle={{ borderBottom: "2px solid #075985" }}
             onComplete={(value, index) => {
               //TO handle case when user pastes OTP