fix(auth): adjust layout for responsive design in authentication steps

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -191,7 +191,7 @@ export function OtpVerifyForm({
         if (!cancelled && otp?.code) {
           setOtpCode(otp.code);
         }
-      } catch { }
+      } catch {}
     };
 
     run();
@@ -217,13 +217,16 @@ export function OtpVerifyForm({
           <Box
             sx={{
               display: 'flex',
-              flexDirection: 'row',
+              flexDirection: { xs: 'column', sm: 'row' },
               alignItems: 'center',
+              gap: 1,
               justifyContent: 'space-between',
               mb: 0.5,
             }}
           >
-            <Typography variant="h5">{t('verify.verify')}</Typography>
+            <Typography variant="h5" sx={{ order: { xs: 2, sm: 1 } }}>
+              {t('verify.verify')}
+            </Typography>
 
             <Button
               variant="outlined"
@@ -231,6 +234,7 @@ export function OtpVerifyForm({
               sx={{
                 textTransform: 'none',
                 width: 'auto',
+                order: { xs: 1, sm: 2 },
               }}
               endIcon={<Icon Component={Edit2} />}
               onClick={onEditValue}