diff --git a/web/src/user_profile.js b/web/src/user_profile.js
index a55feb1a63..87689fb7e0 100644
--- a/web/src/user_profile.js
+++ b/web/src/user_profile.js
@@ -358,7 +358,7 @@ export function register_click_handlers() {
     /* These click handlers are implemented as just deep links to the
      * relevant part of the Zulip UI, so we don't want preventDefault,
      * but we do want to close the modal when you click them. */
-    $("body").on("click", "#user-profile-modal #name #edit-button", () => {
+    $("body").on("click", "#user-profile-modal #name .user_profile_edit_button", () => {
         hide_user_profile();
     });
 
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index dd7adf120a..33377a65e3 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -428,9 +428,14 @@ ul {
         }
     }
 
+    .user_profile_edit_button {
+        margin-left: 10px;
+        width: 25px;
+        text-align: center;
+    }
+
     #edit-button {
         font-size: 18px;
-        margin-left: 10px;
     }
 
     #default-section {
diff --git a/web/templates/user_profile_modal.hbs b/web/templates/user_profile_modal.hbs
index 07cfe3c283..cce8e652cc 100644
--- a/web/templates/user_profile_modal.hbs
+++ b/web/templates/user_profile_modal.hbs
@@ -11,7 +11,7 @@
                     <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                     {{/if}}
                     {{#if is_me}}
-                    <a href="/#settings/profile">
+                    <a href="/#settings/profile" class="user_profile_edit_button">
                         <i class="fa fa-edit" id="edit-button" aria-hidden="true"></i>
                     </a>
                     {{/if}}