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

1 year ago · b66daae1f3
parent 1e7df58b5b
commit b66daae1f3
2 changed files with 9 additions and 1 deletions
--- 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" }}
--- 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;