modal_css: Refactor css of header of user profile modal.

This commit enhances the layout of user profile modal header by using
flexbox properties.

web/styles/modal.css

@@ -62,6 +62,9 @@
     max-width: 80%;
     display: flex;
     align-items: center;
+    gap: 10px;
+    /* This line-height is to increase the vertical clickable areas on the icons. */
+    line-height: 28px;
 
     .user-profile-name {
         white-space: nowrap;

web/styles/popovers.css

@@ -535,26 +535,18 @@ ul {
 
     .user-profile-manage-own-edit-button,
     .user-profile-manage-others-edit-button {
-        width: 25px;
+        text-decoration: none;
-        height: 14px;
-        text-align: center;
-        font-size: 18px;
-    }
-
-    .user-profile-manage-own-copy-link-button {
-        width: 20px;
-        height: 15px;
-        text-align: center;
         font-size: 15px;
     }
 
-    #user_profile_manage_own_copy_link {
+    .user-profile-manage-own-copy-link-button {
-        height: 25px;
+        font-size: 19px;
-        margin-right: 8px;
+        text-decoration: none;
     }
 
-    #user_profile_manage_own_edit_link {
+    .zulip-icon-link,
-        height: 25px;
+    .zulip-icon-edit {
+        vertical-align: middle;
     }
 
     .deactivated-user-icon {
@@ -562,10 +554,6 @@ ul {
         vertical-align: middle;
     }
 
-    .user-profile-name {
-        margin: 0 10px;
-    }
-
     .zulip-icon.zulip-icon-bot {
         padding: unset;
     }

web/templates/user_profile_modal.hbs

@@ -2,18 +2,18 @@
     <div class="modal__overlay" tabindex="-1">
         <div class="modal__container new-style" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
             <div class="modal__header">
-                {{#unless is_bot}}
-                    {{#if is_active}}
-                        <div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
-                            <span class="{{user_circle_class}} user_circle user_profile_presence"></span>
-                        </div>
-                    {{else}}
-                        <div>
-                            <i class="fa fa-ban deactivated-user-icon tippy-zulip-tooltip" data-tippy-content="Deactivated user"></i>
-                        </div>
-                    {{/if}}
-                {{/unless}}
                 <h1 class="modal__title user-profile-name-heading" id="name">
+                    {{#unless is_bot}}
+                        {{#if is_active}}
+                            <div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
+                                <span class="{{user_circle_class}} user_circle user_profile_presence"></span>
+                            </div>
+                        {{else}}
+                            <div>
+                                <i class="fa fa-ban deactivated-user-icon tippy-zulip-tooltip" data-tippy-content="Deactivated user"></i>
+                            </div>
+                        {{/if}}
+                    {{/unless}}
                     {{#if is_bot}}
                         <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                     {{/if}}