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

src/features/authentication/components/AccountCreated/AccountCreated.tsx

@@ -36,7 +36,7 @@ export const AccountCreated = () => {
   };
 
   return (
-    <AuthenticationCard maxWidth="636px">
+    <AuthenticationCard>
       <Stack sx={{ alignItems: 'center' }}>
         <img src={AccountCreatedIcon} />
 

src/features/authentication/components/AuthenticationCard.tsx

@@ -2,13 +2,11 @@ import { Paper, type SxProps, type Theme } from '@mui/material';
 import { type PropsWithChildren } from 'react';
 
 export interface AuthenticationCardProps extends PropsWithChildren {
-  maxWidth?: string;
   sx?: SxProps<Theme>;
 }
 
 export const AuthenticationCard = ({
   children,
-  maxWidth,
   sx,
 }: AuthenticationCardProps) => {
   return (
@@ -22,8 +20,7 @@ export const AuthenticationCard = ({
         },
         mx: 2,
         boxSizing: 'border-box',
-        width: (t) => `calc(100% - ${t.spacing(2)})`,
+        maxWidth: 636,
-        maxWidth: maxWidth ?? '552px',
 
         ...sx,
       }}

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

@@ -124,21 +124,21 @@ export const EnterPasswordForm = ({
       <Box
         sx={{
           display: 'flex',
-          flexDirection: 'row',
+          flexDirection: { xs: 'column', sm: 'row' },
           alignItems: 'center',
           justifyContent: 'space-between',
-          gap: 4,
+          gap: 1,
           mb: 0.5,
         }}
       >
-        <Typography variant="h5">
+        <Typography variant="h5" sx={{ order: { xs: 2, sm: 1 } }}>
           {t('enterPassword.loginWithPassword')}
         </Typography>
 
         <Button
           variant="outlined"
           size="large"
-          sx={{ width: 'auto', textTransform: 'none' }}
+          sx={{ width: 'auto', textTransform: 'none', order: { xs: 1, sm: 1 } }}
           endIcon={<Icon Component={Edit2} />}
           onClick={onEditValue}
         >

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}

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

@@ -123,19 +123,25 @@ export function VerifyPhoneNumber({
           <Box
             sx={{
               display: 'flex',
-              flexDirection: 'row',
+              flexDirection: { xs: 'column', sm: 'row' },
               alignItems: 'center',
               justifyContent: 'space-between',
               gap: 4,
               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"
               size="large"
-              sx={{ textTransform: 'lowercase', width: 'auto' }}
+              sx={{
+                textTransform: 'lowercase',
+                width: 'auto',
+                order: { xs: 1, sm: 2 },
+              }}
               endIcon={<Icon Component={Edit2} />}
               onClick={onEditValue}
             >