fix two factor layout issue

src/components/TwoFactor/VerifyForm.tsx

@@ -50,11 +50,12 @@ export default function VerifyTwoFactor(props: Props) {
             validateOnBlur={false}
             onSubmit={submitForm}>
             {({ values, errors, handleChange, handleSubmit, submitForm }) => (
-                <form
+                <VerticallyCentered>
-                    noValidate
+                    <form noValidate onSubmit={handleSubmit}>
-                    onSubmit={handleSubmit}
+                        <Typography
-                    style={{ width: '100%' }}>
+                            mb={2}
-                    <Typography mb={2} variant="body2" color="text.secondary">
+                            variant="body2"
+                            color="text.secondary">
                             {constants.ENTER_TWO_FACTOR_OTP}
                         </Typography>
                         <Box my={2}>
@@ -62,7 +63,10 @@ export default function VerifyTwoFactor(props: Props) {
                                 ref={otpInputRef}
                                 shouldAutoFocus
                                 value={values.otp}
-                            onChange={onChange(handleChange('otp'), submitForm)}
+                                onChange={onChange(
+                                    handleChange('otp'),
+                                    submitForm
+                                )}
                                 numInputs={6}
                                 separator={'-'}
                                 isInputNum
@@ -82,6 +86,7 @@ export default function VerifyTwoFactor(props: Props) {
                             disabled={values.otp.length < 6}
                         />
                     </form>
+                </VerticallyCentered>
             )}
         </Formik>
     );

src/pages/two-factor/verify/index.tsx

@@ -55,7 +55,7 @@ export default function Home() {
     };
     return (
         <FormContainer>
-            <FormPaper sx={{ maxWidth: '400px' }}>
+            <FormPaper sx={{ maxWidth: '410px' }}>
                 <FormTitle>{constants.TWO_FACTOR}</FormTitle>
                 <VerifyTwoFactor
                     onSubmit={onSubmit}