fix: styles and make it responsive

src/features/authentication/components/PasswordSection.tsx

@@ -58,6 +58,12 @@ export function PasswordSection({
   const handleTogglePasswordRepetitionEye = () =>
     setShowPasswordRepetitionText((prev) => !prev);
 
+  const fieldSx = {
+    flex: '1 1 260px',
+    maxWidth: '309px',
+    width: '100%',
+  };
+
   return (
     <>
       <FormGroup>
@@ -65,7 +71,7 @@ export function PasswordSection({
           sx={{
             display: 'flex',
             gap: 0.5,
-            px: { xs: 2, sm: 6 },
+            px: { xs: 2, sm: -4 },
             alignItems: 'center',
           }}
         >
@@ -89,18 +95,27 @@ export function PasswordSection({
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
-            px: { xs: 2, sm: 6 },
+            px: { xs: 2, sm: 0 },
           }}
         >
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 2,
+              justifyContent: 'center',
+              '@media(min-width: 600px)': {
+                justifyContent: 'flex-start',
+              },
+            }}
+          >
             <TextField
               label={t('completion.password')}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               variant="outlined"
               type={showPasswordText ? 'text' : 'password'}
-              fullWidth
-              sx={{ maxWidth: '309px', flex: 1 }}
+              sx={fieldSx}
               InputProps={{
                 endAdornment: (
                   <InputAdornment position="end" sx={{ height: 'unset' }}>
@@ -155,9 +170,8 @@ export function PasswordSection({
                   ? t('completion.notCompatibility')
                   : ' '
               }
-              fullWidth
-              sx={{ maxWidth: '309px', flex: 1 }}
               type={showPasswordRepititonText ? 'text' : 'password'}
+              sx={fieldSx}
               InputProps={{
                 endAdornment: (
                   <InputAdornment position="end" sx={{ height: 'unset' }}>
@@ -224,11 +238,20 @@ export function PasswordSection({
           </Box>
 
           {password && showValidations && (
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 2,
+                justifyContent: 'center',
+                '@media(min-width: 600px)': {
+                  justifyContent: 'flex-start',
+                },
+              }}
+            >
               <Box
                 sx={{
-                  flex: 1,
-                  minWidth: '260px',
+                  flex: '1 1 260px',
                   maxWidth: '317px',
                   display: 'flex',
                   flexDirection: 'column',
@@ -245,8 +268,7 @@ export function PasswordSection({
               </Box>
               <Box
                 sx={{
-                  flex: 1,
-                  minWidth: '260px',
+                  flex: '1 1 260px',
                   maxWidth: '317px',
                   display: 'flex',
                   flexDirection: 'column',