Password visibility toggle icon is misaligned on the Add New User screen

[sanayasir]

### Description

The password visibility (show/hide password) toggle icon is misaligned on the Users → Add New User screen. The icon is not properly aligned within the password field, resulting in an inconsistent user interface.

I verified that this issue does not occur in WordPress 7.0, where the password visibility icon is correctly aligned. However, after testing the latest WordPress 7.0.1 release, I found that the issue is now reproducible, suggesting that it was introduced in version 7.0.1.

### Steps to Reproduce

1. Log in to the WordPress admin dashboard.
2. Navigate to Users → Add New User.
3. Locate the password field.
4. Observe the position of the password visibility (eye) icon.

### Expected Result

The password visibility toggle icon should remain properly aligned within the password field, as it was in WordPress 7.0.

### Actual Result

In WordPress 7.0.1, the password visibility toggle icon appears misaligned within the password field.

### Environment

• WordPress Version: 7.0.1 (latest release)
• Previous Version Tested: 7.0 (issue not present)

[iamchitti]

The 7.0.1 fix for #65031 ("Fix misaligned icon in user profile password field") introduced alignment CSS scoped to the class .user-new-password-toggle:

.button.wp-hide-pw.user-new-password-toggle {
      display: inline-flex;
      align-items: center;
      column-gap: 4px;
}

but only applied that class to the button in user-edit.php (the Profile / Edit User screen).

The Add New User screen (user-new.php) has the identical show/hide button (a .dashicons icon + .text label), yet never received the class - so its icon still relied on inline vertical-align: middle and rendered misaligned against the "Hide" text.

I'm raising a fix PR for this.

## Description

Trac ticket: https://core.trac.wordpress.org/ticket/65605

The password visibility (show/hide) toggle icon is misaligned within the password field on the Users → Add New User screen. The eye icon does not line up correctly with the "Hide"/"Show" label inside the button.

### Root cause

This regressed from the fix for #65031, which corrected the same misalignment on the Profile / Edit User screen. That fix scoped the alignment CSS to a new .user-new-password-toggle class and only added that class to the button in user-edit.php:

.button.wp-hide-pw.user-new-password-toggle {
      display: inline-flex;
      align-items: center;
      column-gap: 4px;
}

The Add New User screen (user-new.php) uses the identical show/hide button (.button.wp-hide-pw with a .dashicons icon + .text label) but never received the class, so its icon fell back to inline vertical-align: middle and rendered misaligned.

## Fix

Instead of adding the marker class to each screen, the alignment rule is generalized to target the toggle buttons directly, so every show/hide/cancel password button is aligned consistently with no per-screen markup:

.wp-core-ui .button.wp-hide-pw,
.wp-core-ui .button.wp-cancel-pw {
      display: inline-flex;
      align-items: center;
      column-gap: 4px;
}

The now-redundant .user-new-password-toggle class is removed from user-edit.php.

## Testing Instructions

1. Go to Users → Add New User and click Generate password. Confirm the eye icon is vertically centered with the "Hide" label inside the button.
2. Go to Users → Profile → Set New Password. Confirm the show/hide and Cancel button icons remain aligned.
3. Go to Settings → Writing → Post via email and confirm the password field's icon is still aligned (icon-only button).
4. Check in an RTL locale and at mobile viewport widths.

## Screenshots

Before on user-new.php -

After on user-new.php

Before on profile.php (no-change)

After on profile.php

Before on options-writing.php (no-change)

After on options-writing.php

[soyebsalar01]

Tested this patch and can confirm it resolves the issue.

Test Report

Tested on WordPress 7.0.1 with the patch applied, following the steps outlined in the description:

1. Logged into wp-admin
2. Navigated to Users → Add New User
3. Checked the password field's visibility toggle icon

Result: The eye icon is now properly aligned within the password field.

Environment:

• WordPress: 7.0.1 (with patch)
• Browser: Chrome (latest)

Images

Before Fix : ​https://postimg.cc/T5m6dDNX

After Fix : ​https://postimg.cc/Y4nkbkLm

Confirmed fixed.

[joedolson]

This is a bug, so we can continue to resolve this during the beta phase. We should also review all other instances of this pattern, so that we can make sure we're fixing alignments everywhere we need to.

[iamchitti]

thanks for the test @soyebsalar01 .
@joedolson , I've tested it on profile, user edit, user add, writing settings screen and password reset. Let me know if I've missed any screen using password show/hide button.

[softglaze]

Trunk: user-new.php toggle lacks the class, computes inline-block" (your before shot showing the class list + buttons.css rule)

[softglaze]

Trunk: profile.php toggle has the class, computes inline-flex via #65031 rule

[softglaze]

PR 12472: user-new.php toggle now has the class, computes inline-flex (flex badge)" (Screenshot with the Computed panel showing display: inline-flex)

[softglaze]

PR 12472: profile.php unchanged, still inline-flex

[softglaze]

First test report for this ticket — verified PR 12472 against current trunk (7.1-beta2-src).

Environment: Windows host, wordpress-develop Docker environment, Chrome (cache disabled via DevTools), clean npm ci + npm run ​build:dev before each test.

Before (trunk), confirming the reported inconsistency at the CSS level: on user-new.php the show/hide toggle lacks the user-new-password-toggle class and computes display: inline-block (generic .wp-core-ui .button style — no flex alignment), while the identical button on profile.php has the class and computes display: inline-flex via the #65031 rule. Screenshots attached showing both buttons' class lists, applied rules, and computed values.

After (PR 12472 + rebuild): the user-new.php toggle now receives the alignment treatment and computes display: inline-flex (flex container badge in DevTools), consistent with profile.php, which is unchanged.

Note: as implemented, the PR applies the existing user-new-password-toggle class/rule to the Add New User screen rather than the generalized .wp-hide-pw/.wp-cancel-pw selector described in the PR summary — the PR description may want updating to match, but the fix resolves the reported inconsistency either way.

The visual offset is subtle at standard zoom; the structural before/after (inline-block → inline-flex on the affected screen) is unambiguous. RTL and mobile widths not covered in this pass.

Patch tests well on trunk.

[noruzzaman]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/12472

Environment

• WordPress: 7.1-alpha-20260714.050628
• Subdirectory: No
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 150.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0

Steps taken

1. Went to Users → Add User.
2. Clicked "Generate password".
3. Checked the alignment of the eye icon relative to the "Hide" label inside the button.
4. ✅ Patch is solving the problem: The eye icon is now vertically aligned with the "Hide" label on the Add New User screen, matching the alignment already present on the Profile / Edit User screen.

Expected result

• The password visibility toggle icon should be vertically centered with the "Hide"/"Show" label on the Add New User screen, consistent with the Profile screen.

Screenshots

Before	After

[ugyensupport]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/12472

Description

The password visibility (show/hide password) toggle icon is misaligned on the Users → Add New User screen. The icon is not properly aligned within the password field, resulting in an inconsistent user interface.

I verified that this issue does not occur in WordPress 7.0, where the password visibility icon is correctly aligned. However, after testing the latest WordPress 7.0.1 release, I found that the issue is now reproducible, suggesting that it was introduced in version 7.0.1.

Environment

• WordPress: 7.1-beta3
• Subdirectory: No
• PHP: 8.4.14
• Server: nginx/1.21.4
• Database: mysqli (Server: 5.7.44-log / Client: mysqlnd 8.4.14)
• Browser: Chrome 150.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0
  • WordPress Beta Tester 4.0.0
  • WP File Manager 8.0.4

Steps taken

Log in to the WordPress admin dashboard.
Navigate to Users → Add New User.
Locate the password field.
Observe the position of the password visibility (eye) icon.

Expected result

• The password visibility toggle icon should be vertically centered with the "Hide"/"Show" label on the Add New User screen, consistent with the Profile screen.

Result

• ✅ Patch is solving the problem

Screenshots/Screencast with results

• [Screenshot/Screencast before]​https://i.postimg.cc/sDtfJ3vW/Before.jpg
• [Screenshot/Screencast after]​https://i.postimg.cc/Kj1FnWFZ/After.jpg

[shailu25]

Test Report

This Report Validates that the indicated patch address the issue.✅

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/12472

Environment:

WordPress - 7.1-alpha-20260714.050628
OS - Windows
Browser - Chrome
Theme: Twenty Twenty Five
PHP - 7.4.33
Plugin - None

Actual Results:

• Issue Resolved with Patch ✅

Supplemental Artifacts

• Attached

[shailu25]

Before Patch

[shailu25]

After Patch

[wildworks]

#65307 was marked as a duplicate.

To me, it makes sense for this change to cover all misalignments. That said, the misalignment on the login screen is extremely slight, and I'm not sure that makes a difference.

@sabernhardt I was unable to identify anything in user-profile.js that would set inline-block on that element. Can you identify where that's coming from?

The inline style on the Install page came from the .show() function.
​https://github.com/WordPress/wordpress-develop/blob/f408760d5767018c2cf495fe2375e562f4942013/src/js/_enqueues/admin/user-profile.js#L107

However, my testing was a bit flawed because I had added the classes within the browser _after_ the page loaded. When the class is there already, it somehow skips adding display: inline-block.

The icon displays correctly when applying the patch:

[joedolson]

In 62967:

Users: Show/hide password button icon misaligned.

In several contexts (Add New User, Install, and Setup/Config), the show/hide password icon was misaligned in varying amounts in different viewports.

Add the classes wp-hide-pw and user-new-password-toggle to the button container to re-use existing CSS consistently.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12472

Props sanayasir, iamchitti, softglaze, shailu25, soyebsalar01, noruzzaman, ugyensupport, wildworks, ankitpatel1578, praful2111, joedolson, sabernhardt.
Fixes #65605.