From bd2d21581d8e03720a7489e4b3b05399dba5b2f0 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 11 Mar 2022 13:51:20 +0100
Subject: [PATCH] Message Context Menu: Fix jumping width (#1758)

---
 .../middle/message/MessageContextMenu.scss    |  8 ++++-
 .../middle/message/MessageContextMenu.tsx     | 29 +++++++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/middle/message/MessageContextMenu.scss b/src/components/middle/message/MessageContextMenu.scss
index edfc5ec7b..dc3f2497a 100644
--- a/src/components/middle/message/MessageContextMenu.scss
+++ b/src/components/middle/message/MessageContextMenu.scss
@@ -29,7 +29,13 @@
   }
 
   &--seen-by {
-    min-width: 14rem;
+    max-width: 14rem;
+  }
+
+  &--seen-by-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .avatars {
diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx
index 147542cda..d77464d0c 100644
--- a/src/components/middle/message/MessageContextMenu.tsx
+++ b/src/components/middle/message/MessageContextMenu.tsx
@@ -255,18 +255,23 @@ const MessageContextMenu: FC<OwnProps> = ({
             onClick={canShowReactionsCount ? onShowReactors : onShowSeenBy}
             disabled={!canShowReactionsCount && !message.seenByUserIds?.length}
           >
-            {canShowReactionsCount && message.reactors?.count ? (
-              canShowSeenBy && message.seenByUserIds?.length
-                ? lang('Chat.OutgoingContextMixedReactionCount', [message.reactors.count, message.seenByUserIds.length])
-                : lang('Chat.ContextReactionCount', message.reactors.count, 'i')
-            ) : (
-              message.seenByUserIds?.length === 1 && seenByRecentUsers
-                ? getUserFullName(seenByRecentUsers[0])
-                : (message.seenByUserIds?.length
-                  ? lang('Conversation.ContextMenuSeen', message.seenByUserIds.length, 'i')
-                  : lang('Conversation.ContextMenuNoViews')
-                )
-            )}
+            <span className="MessageContextMenu--seen-by-label">
+              {canShowReactionsCount && message.reactors?.count ? (
+                canShowSeenBy && message.seenByUserIds?.length
+                  ? lang(
+                    'Chat.OutgoingContextMixedReactionCount',
+                    [message.reactors.count, message.seenByUserIds.length],
+                  )
+                  : lang('Chat.ContextReactionCount', message.reactors.count, 'i')
+              ) : (
+                message.seenByUserIds?.length === 1 && seenByRecentUsers
+                  ? getUserFullName(seenByRecentUsers[0])
+                  : (message.seenByUserIds?.length
+                    ? lang('Conversation.ContextMenuSeen', message.seenByUserIds.length, 'i')
+                    : lang('Conversation.ContextMenuNoViews')
+                  )
+              )}
+            </span>
             <div className="avatars">
               {seenByRecentUsers?.map((user) => (
                 <Avatar