Confirmed. Played around with the CSS settings in firefox and it seems to be enough to set the font size of the password field to 125% instead of 130% at least for firefox. It does not work for edge.
AFAIK there is no “operating system” selector on CSS.
We could refactor a bit the CSS as @mrmarkuz suggested, just for the login page.
If someone can do open a PR, I will be really happy.
Otherwise let wait until @davidep returns from his holidays, but honestly I want to avoid wasting time in such things
I’m going to close again the issue. If you find a fix, please open a new issue with all information to reproduce it (like the browser version).
#Login_password {
padding-right: 24px;/*or 30-32px*/
}
#LoginAction .PasswordButton {
right: 0px; /*no slip out of input field by the right side*/
}
Using padding-right can increase login panel width, but without annoyances.
In both cases, padding-right has room to be increased until 32px (the size of the eye button, more would be unnecessary).
Test it with multiple OS and web browsers, if possible, and check if:
password field is (nearly) the same size as username field
eye correctly positioned
the eye icon does not overlap the (un)masked password (characters seen behind the icon). Increase padding if more separation is wanted (suggested values in css comments).
Optional: If cannot test on mobile, test mobile/responsive design mode.
I’ve tested it on GNU/Linux with Firefox and Chromium; on Windows 10 with Firefox, Chrome and Edge, by changing css from browser’s developer tools.
Tested first and optional variation and all pixel suggestions;
did not notice difference between them:
Windows 10 (on a workstation and 2 laptops)
Firefox: all zoom-levels oke except :
30% (eye icon out of the much smaller box) and
60% (eye icon overlaps in slightly smaller box) Consider it as fixed !
MS-Edge : all zoom-levels oke
Chromium : all zoom-levels oke.
Linux (Debian 9 & Centos 7) (on VM’s > RDP one multi boot laptop)