From 697cdb31e55d77993eec5693c74586e502b2fa23 Mon Sep 17 00:00:00 2001
From: Hardik Dharmani <Ddharmani99@gmail.com>
Date: Tue, 2 May 2023 21:23:32 +0530
Subject: [PATCH] message_headers: Abbrevate direct message recipient names.

Abbrevated DM recipient names in message feeds, Drafts and Scheduled
messages overlays by wrapping recipient names in span with class
private_message_header_name and applying `overflow: hidden` and
`text-overflow: ellipsis` CSS to it.

Fixes #25353
---
 web/styles/zulip.css                | 5 +++++
 web/templates/draft.hbs             | 2 +-
 web/templates/recipient_row.hbs     | 2 +-
 web/templates/scheduled_message.hbs | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 90211d456f..b06eb9394a 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1416,6 +1416,11 @@ td.pointer {
             width: 16px;
             height: 16px;
         }
+
+        .private_message_header_name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 }
 
diff --git a/web/templates/draft.hbs b/web/templates/draft.hbs
index 0c5d555864..54977a55bf 100644
--- a/web/templates/draft.hbs
+++ b/web/templates/draft.hbs
@@ -24,7 +24,7 @@
             <div class="message-header-contents">
                 <div class="message_label_clickable stream_label">
                     <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
-                    {{t "You and {recipients}" }}
+                    <span class="private_message_header_name">{{t "You and {recipients}" }}</span>
                 </div>
                 <div class="recipient_row_date" title="{{t 'Last modified'}}">{{ time_stamp }}</div>
             </div>
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index 2528c516c5..26263a6bd3 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -76,7 +76,7 @@
           href="{{pm_with_url}}"
           data-tippy-content="{{t 'Go to direct messages with {display_reply_to}' }}">
         <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
-        {{t "You and {display_reply_to}" }}
+        <span class="private_message_header_name">{{t "You and {display_reply_to}" }}</span>
         </a>
         <span class="recipient_row_date {{#if date_unchanged}}recipient_row_date_unchanged{{/if}}">{{{date}}}</span>
     </div>
diff --git a/web/templates/scheduled_message.hbs b/web/templates/scheduled_message.hbs
index 4c7dd4b157..b1ecbc99e4 100644
--- a/web/templates/scheduled_message.hbs
+++ b/web/templates/scheduled_message.hbs
@@ -25,7 +25,7 @@
                 <div class="message-header-contents">
                     <div class="message_label_clickable stream_label">
                         <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
-                        {{t "You and {recipients}" }}
+                        <span class="private_message_header_name">{{t "You and {recipients}" }}</span>
                     </div>
                     <div class="recipient_row_date">{{ formatted_send_at_time }}</div>
                 </div>