From 706fc47feb0fd27a5d29ad3ae86524a5772bf698 Mon Sep 17 00:00:00 2001
From: "Stephen A. Bernhardt" <sabernhardt@yahoo.com>
Date: Sat, 30 Jul 2022 17:05:56 -0500
Subject: [PATCH] Updating styles for flex option

---
 src/wp-admin/css/login.css | 14 ++++++++++++++
 src/wp-login.php           | 12 +++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
index 1f89db216eda0..11d6ca95e38b1 100644
--- a/src/wp-admin/css/login.css
+++ b/src/wp-admin/css/login.css
@@ -125,6 +125,20 @@ p {
 	position: relative;
 }
 
+.js.login .has-password-toggle {
+	display: flex;
+}
+
+.js.login .has-password-toggle .password-input {
+	padding-right: 0.3125rem;
+}
+
+.js.login .has-password-toggle .button.wp-hide-pw {
+	border-color: currentColor;
+	border-radius: 4px;
+	position: static;
+}
+
 .no-js .hide-if-no-js {
 	display: none;
 }
diff --git a/src/wp-login.php b/src/wp-login.php
index 43386688ce676..40b9e4730f015 100644
--- a/src/wp-login.php
+++ b/src/wp-login.php
@@ -954,11 +954,13 @@ function wp_login_viewport_meta() {
 				</p>
 
 				<div class="wp-pwd">
-					<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="new-password" aria-describedby="pass-strength-result" />
+					<div class="has-password-toggle">
+						<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="new-password" aria-describedby="pass-strength-result" />
 
-					<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
-						<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
-					</button>
+						<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
+							<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
+						</button>
+					</div>
 					<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
 				</div>
 				<div class="pw-weak">
@@ -1410,7 +1412,7 @@ function wp_login_viewport_meta() {
 
 			<div class="user-pass-wrap">
 				<label for="user_pass"><?php _e( 'Password' ); ?></label>
-				<div class="wp-pwd">
+				<div class="wp-pwd has-password-toggle"">
 					<input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby; ?> class="input password-input" value="" size="20" autocomplete="current-password" />
 					<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
 						<span class="dashicons dashicons-visibility" aria-hidden="true"></span>