From b66daae1f3552b88e9b4a2c81fcb1d9f1a43c717 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Barnab=C3=A1s=20Moln=C3=A1r?=
 <38168628+barnabasmolnar@users.noreply.github.com>
Date: Sun, 21 Jan 2024 20:36:09 +0100
Subject: [PATCH] fix: Truncate collaborator name in dropdown. (#7576)

---
 packages/excalidraw/actions/actionNavigate.tsx | 4 +++-
 packages/excalidraw/components/UserList.scss   | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/actions/actionNavigate.tsx b/packages/excalidraw/actions/actionNavigate.tsx
index 4ce79b96fa..ea65584fe6 100644
--- a/packages/excalidraw/actions/actionNavigate.tsx
+++ b/packages/excalidraw/actions/actionNavigate.tsx
@@ -57,7 +57,9 @@ export const actionGoToCollaborator = register({
           isBeingFollowed={isBeingFollowed}
           isCurrentUser={collaborator.isCurrentUser === true}
         />
-        {collaborator.username}
+        <div className="UserList__collaborator-name">
+          {collaborator.username}
+        </div>
         <div
           className="UserList__collaborator-follow-status-icon"
           style={{ visibility: isBeingFollowed ? "visible" : "hidden" }}
diff --git a/packages/excalidraw/components/UserList.scss b/packages/excalidraw/components/UserList.scss
index 40dc168ffa..fceb1e7c44 100644
--- a/packages/excalidraw/components/UserList.scss
+++ b/packages/excalidraw/components/UserList.scss
@@ -51,6 +51,12 @@
     color: var(--color-gray-100);
   }
 
+  .UserList__collaborator-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   .UserList__collaborator-follow-status-icon {
     margin-left: auto;
     flex: 0 0 auto;