fix: styles

src/features/authentication/components/PasswordSection.tsx

@@ -54,26 +54,29 @@ export function PasswordSection({
     setShowPasswordSection(e.target.checked);
   };
 
-  const handleTogglePasswordEye = () => {
-    setShowPasswordText((prev) => !prev);
-  };
-
-  const handleTogglePasswordRepetitionEye = () => {
+  const handleTogglePasswordEye = () => setShowPasswordText((prev) => !prev);
+  const handleTogglePasswordRepetitionEye = () =>
     setShowPasswordRepetitionText((prev) => !prev);
-  };
 
   return (
     <>
       <FormGroup>
-        <Box sx={{ display: 'flex', gap: 0.5, px: 6, alignItems: 'center' }}>
-          <Box dir="ltr">
-            <Switch
-              checked={showPasswordSection}
-              onChange={handleTogglePasswordSection}
-            />
-          </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 0.5,
+            px: { xs: 2, sm: 6 },
+            alignItems: 'center',
+          }}
+        >
+          <Switch
+            checked={showPasswordSection}
+            onChange={handleTogglePasswordSection}
+          />
           <Typography
-            sx={{ color: showPasswordSection ? '#2979FF' : 'text.primary' }}
+            sx={{
+              color: showPasswordSection ? 'primary.main' : 'text.primary',
+            }}
           >
             {t('completion.determinePassword')}
           </Typography>
@@ -81,15 +84,23 @@ export function PasswordSection({
       </FormGroup>
 
       {showPasswordSection && (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
-          <Box sx={{ display: 'flex', gap: 2 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            px: { xs: 2, sm: 6 },
+          }}
+        >
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
             <TextField
               label={t('completion.password')}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               variant="outlined"
               type={showPasswordText ? 'text' : 'password'}
-              sx={{ width: '309px' }}
+              fullWidth
+              sx={{ maxWidth: '309px', flex: 1 }}
               InputProps={{
                 endAdornment: (
                   <InputAdornment position="end" sx={{ height: 'unset' }}>
@@ -144,7 +155,8 @@ export function PasswordSection({
                   ? t('completion.notCompatibility')
                   : ' '
               }
-              sx={{ width: '309px' }}
+              fullWidth
+              sx={{ maxWidth: '309px', flex: 1 }}
               type={showPasswordRepititonText ? 'text' : 'password'}
               InputProps={{
                 endAdornment: (
@@ -156,8 +168,8 @@ export function PasswordSection({
                         width: '100%',
                       }}
                     >
-                      {confirmPassword.length > 0 ? (
-                        matchPassword ? (
+                      {confirmPassword.length > 0 &&
+                        (matchPassword ? (
                           <TickCircle
                             size="24"
                             color="#14AE5C"
@@ -179,8 +191,7 @@ export function PasswordSection({
                               marginRight: '16px',
                             }}
                           />
-                        )
-                      ) : null}
+                        ))}
 
                       <IconButton
                         onClick={handleTogglePasswordRepetitionEye}
@@ -213,10 +224,12 @@ export function PasswordSection({
           </Box>
 
           {password && showValidations && (
-            <Box sx={{ display: 'flex', gap: 2 }}>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
               <Box
                 sx={{
-                  width: '317px',
+                  flex: 1,
+                  minWidth: '260px',
+                  maxWidth: '317px',
                   display: 'flex',
                   flexDirection: 'column',
                 }}
@@ -232,7 +245,9 @@ export function PasswordSection({
               </Box>
               <Box
                 sx={{
-                  width: '317px',
+                  flex: 1,
+                  minWidth: '260px',
+                  maxWidth: '317px',
                   display: 'flex',
                   flexDirection: 'column',
                 }}