From 9e4aa19acf9e6022de91dd9e50b39720802add28 Mon Sep 17 00:00:00 2001
From: SameepAher <sameepaher@gmail.com>
Date: Fri, 27 Jan 2023 11:48:43 +0530
Subject: [PATCH] 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                 | 12 ++++++++++++
 static/templates/user_profile_modal.hbs |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/static/styles/modal.css b/static/styles/modal.css
index be666d4d4e..2cc51e077b 100644
--- a/static/styles/modal.css
+++ b/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";
diff --git a/static/templates/user_profile_modal.hbs b/static/templates/user_profile_modal.hbs
index 91c25ea80e..69819bca49 100644
--- a/static/templates/user_profile_modal.hbs
+++ b/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}}