[wp-trac] [WordPress Trac] #48222: "Show password" button overlaps with the LastPass icon

[WordPress Trac]

#48222: "Show password" button overlaps with the LastPass icon
-------------------------------------------------+-------------------------
 Reporter:  SergeyBiryukov                       |       Owner:
                                                 |  sabernhardt
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  6.0
Component:  Login and Registration               |     Version:  5.3
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch needs-     |     Focuses:  ui
  design-feedback needs-testing early            |
-------------------------------------------------+-------------------------

Comment (by sabernhardt):

 That screenshot looks the same (to me) as 48222.10.diff, but this patch
 does need more than design feedback.
 - Setting `display: block` on `.login .button.wp-hide-pw` overrides `.no-
 js .hide-if-no-js`.
 - The JS change affects the user pages (Profile, New User, Edit User). The
 text includes "password" on larger screens, and the ARIA label is stuck at
 "Hide password" whether the password is showing or not.

 Regarding the design:
 - Preventing overlap of password manager icons over the password itself
 seems impossible without including extra padding. That would not make
 sense for people who do not use a password manager.
 - I do not want to try forcing a width for the toggle button (for example,
 using both text strings in `span` tags and hiding one with `visibility:
 hidden`). However, **moving the icon** to the other side of the text could
 make the width difference between the two text strings less noticeable.
 - The bottom margin could be slightly more (16px instead of 12).

 I [https://github.com/sabernhardt/wordpress-develop/pull/2 drafted a PR]
 to explore some revisions. (Note: The PR is still on my fork and may
 change.)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48222#comment:61>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform