css: Fix long name overflow in user profile modal.

Set width of the heading tag displaying user profile name heading, which
doesn't let the edit button get pushed off the user profile modal.

Ellipsis property is applied to user profile name on text overflow.

Fixes: #23781.

static/styles/modal.css

@@ -50,6 +50,7 @@
     font-size: 1.375rem;
     font-weight: 600;
     line-height: 1.25;
+    display: flex;
 
     /* help_link_widget margin for the fa-circle-o. */
     .help_link_widget {
@@ -57,6 +58,17 @@
     }
 }
 
+.user_profile_name_heading {
+    padding-right: 1rem;
+    max-width: 80%;
+
+    .user_profile_name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
 .modal__close {
     &::before {
         content: "\2715";

static/templates/user_profile_modal.hbs

@@ -5,8 +5,8 @@
                 <div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
                     <span class="{{user_circle_class}} user_circle user_profile_presence"></span>
                 </div>
-                <h1 class="modal__title" id="name">
-                    {{full_name}}
+                <h1 class="modal__title user_profile_name_heading" id="name">
+                    <span class="user_profile_name">{{full_name}}</span>
                     {{#if is_bot}}
                     <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                     {{/if}}