From 174c72ddf37729628c8535e0fb41523cb2f63901 Mon Sep 17 00:00:00 2001
From: Amir Moghani <am.maghani@gmail.com>
Date: Sat, 13 Jun 2026 22:18:27 +0330
Subject: [PATCH] fix(auth): adjust layout for responsive design in
 authentication steps

---
 .../components/AccountCreated/AccountCreated.tsx     |  2 +-
 .../authentication/components/AuthenticationCard.tsx |  5 +----
 .../AuthenticationSteps/EnterPasswordForm.tsx        |  8 ++++----
 .../components/AuthenticationSteps/OtpVerifyForm.tsx | 10 +++++++---
 .../AuthenticationSteps/VerifyPhoneNumber.tsx        | 12 +++++++++---
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/features/authentication/components/AccountCreated/AccountCreated.tsx b/src/features/authentication/components/AccountCreated/AccountCreated.tsx
index bee3d4d..632bbf7 100644
--- a/src/features/authentication/components/AccountCreated/AccountCreated.tsx
+++ b/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} />
 
diff --git a/src/features/authentication/components/AuthenticationCard.tsx b/src/features/authentication/components/AuthenticationCard.tsx
index c9c060c..b305352 100644
--- a/src/features/authentication/components/AuthenticationCard.tsx
+++ b/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: maxWidth ?? '552px',
+        maxWidth: 636,
 
         ...sx,
       }}
diff --git a/src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx b/src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx
index 40f982c..d2e04a5 100644
--- a/src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx
+++ b/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}
         >
diff --git a/src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx b/src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx
index 101ef19..cf231de 100644
--- a/src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx
+++ b/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}
diff --git a/src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx b/src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx
index fc1210c..9dc4aa2 100644
--- a/src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx
+++ b/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}
             >