fix: Truncate collaborator name in dropdown. (#7576)

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" }}

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;