settings: Convert password dialog box to use flexbox.

Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/Eye.20icon.20misaligned.20in.20Manage.20your.20API.20key/near/1890711.
The eye icon to show and hide password was misaligned in the 16px info
density mode. But since the icon was using absolute positioning to style
the icon, we took this chance to refactor the element to use flexbox.
We've renamed the `password-div` to `settings-password-div` for settings
specific styling. The eye icon was only broken in settings, and since
the settings and the login/signup stuff the same class was used at is
quite different from each other, it might be better to have two
different classes. The other `password-div` has not been refactored, it
might be better refactored in its own PR along with other similar
elements to use flexbox.

web/styles/settings.css

@@ -1156,20 +1156,53 @@ input[type="checkbox"] {
 
 #api_key_form,
 #change_password_modal {
-    .password-div {
-        position: relative;
+    .settings-password-div {
+        display: flex;
+        flex-wrap: wrap;
 
-        & input[type="text"] {
-            margin-bottom: 10px;
+        .modal-field-label {
+            /* Keep the label to its own
+               line in the wrapping flexbox. */
+            flex: 0 0 100%;
+        }
+
+        .modal_password_input {
+            /* The usual width of input is 206px, but we reduce
+               it by 30px to make way for the padding. */
+            width: 176px;
+            padding-right: 30px;
         }
 
         .password_visibility_toggle {
-            position: absolute;
-            left: 194px;
-            top: 32px;
-            width: 14px;
+            /* We're going to use flexbox, not
+               positioning, to get the clear button
+               over top of the input. This -2em
+               margin accomplishes that, in tandem
+               with the 2em width of this element,
+               which is shared with the ending
+               anchor element in left sidebar header
+               rows. We're using em instead of pixels
+               so the whitespace between the input box
+               and the icon doesn't decrease when the
+               icon's font-size increases when switching
+               from 14px info density to 16px info density
+               mode. */
+            width: 2em;
+            margin-left: -2em;
+
+            /* Make the button itself a flex container,
+               so we can perfectly center the X icon. */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
             opacity: 0.6;
 
+            /* Make the bottom margin same as `.modal_password_input`
+               for proper centering, if the margin changes there,
+               it should also change here and vice versa. */
+            margin-bottom: 10px;
+
             &:hover {
                 opacity: 1;
             }

web/templates/dialog_change_password.hbs

@@ -1,5 +1,5 @@
 <form id="change_password_container">
-    <div class="password-div">
+    <div class="settings-password-div">
         <label for="old_password" class="modal-field-label">{{t "Old password" }}</label>
         <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block modal_password_input" value="" />
         <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
@@ -7,7 +7,7 @@
             <a href="/accounts/password/reset/" class="sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgot it?" }}</a>
         </div>
     </div>
-    <div class="password-div">
+    <div class="settings-password-div">
         <label for="new_password" class="modal-field-label">{{t "New password" }}</label>
         <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block modal_password_input" value=""
           data-min-length="{{password_min_length}}" data-min-guesses="{{password_min_guesses}}" />

web/templates/settings/api_key_modal.hbs

@@ -12,7 +12,7 @@
                     <span class="alert-notification" id="api_key_status"></span>
                     <div id="api_key_form">
                         <p>{{t "Please re-enter your password to confirm your identity." }}</p>
-                        <div class="password-div">
+                        <div class="settings-password-div">
                             <label for="password" class="modal-field-label">{{t "Your password" }}</label>
                             <input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" />
                             <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>