Password input width is incoherent and overflows

Said CSS is actually in Claro (I haven't tested with other themes).

Thanks for the bug report @kopeboy! 😊

The .password-confirm selector is supposed to target the wrapper of the passwords but it looks like the class is also applied on the second password item. 🙈 I think the right fix here would be to remove the password-confirm class from the pass2 password input.

Added a patch which is targeting the password strength as mentioned by the @kopeboy, I've checked on Olivero theme, same issue is showing there as well. Added before & after screenshots of the claro theme and one screenshot for the Olivero.

@lauriii are we removing the class as it should not be repeated on the child selector? Or any other specific reason for that please confirm

IS needs to be updated with proposed solution in #4

The password field is in consistence compare to other fields. Now with this patch all the fields are rendering in 100%. Screenshot is attached.

I have added a patch with different approach. In patch #5, we are limiting the password strength with 25ch.

 .password-strength {
   margin-block: var(--progress-bar-spacing-size);
+  max-width: 25ch;
 }

On the parent we already have max-width of 25rem; If we give input fields, width: 100% then it is aligning with the password policy as well. I have attached a patch and after patch screenshot for reference. Please review

After Patch

Seems issue summary still needs to be updated please.

Thanks

The fix in #9 looks good and I confirmed it addresses the original issue. We could fix the issue related .password-confirm applying to multiple elements in another issue.

Committed 4d30ef7 and pushed to 11.x. Also cherry-picked to 10.1.x as this is a low risk bug fix to Claro. Thanks!

Opened a follow up issue for .password-confirm 🐛 Remove the password-confirm class from the pass2 password input Needs work

Automatically closed - issue fixed for 2 weeks with no activity.