Administration: Fix misaligned icon in user profile password field on mobile.

t-hamano · t-hamano · commit 4b343a7eab82 · 2026-04-27T04:36:06.000Z
In [62262], the show/hide button next to the password field was aligned using `line-height` and `vertical-align`. This approach left the icon misaligned on mobile viewports. Follow-up to [62262]. Props mukesh27, wildworks. Fixes #65031. git-svn-id: https://develop.svn.wordpress.org/trunk@62272 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
@@ -583,9 +583,10 @@ input[type="number"].tiny-text {
 	vertical-align: middle;
 }
 
-.button.wp-hide-pw.user-new-password-toggle > .dashicons {
-	line-height: 1.85;
-	vertical-align: top;
+.button.wp-hide-pw.user-new-password-toggle {
+	display: inline-flex;
+	align-items: center;
+	column-gap: 4px;
 }
 
 .wp-cancel-pw .dashicons-no {

Original file line number	Diff line number	Diff line change
`@@ -583,9 +583,10 @@ input[type="number"].tiny-text {`
`583`	`583`	`vertical-align: middle;`
`584`	`584`	`}`
`585`	`585`
`586`		`-.button.wp-hide-pw.user-new-password-toggle > .dashicons {`
`587`		`- line-height: 1.85;`
`588`		`- vertical-align: top;`
	`586`	`+.button.wp-hide-pw.user-new-password-toggle {`
	`587`	`+ display: inline-flex;`
	`588`	`+ align-items: center;`
	`589`	`+ column-gap: 4px;`
`589`	`590`	`}`
`590`	`591`
`591`	`592`	`.wp-cancel-pw .dashicons-no {`