From fb9e8941e4184b83ac84b088071aa0a812ace53a Mon Sep 17 00:00:00 2001
From: iso9000t <119494473+iso9000t@users.noreply.github.com>
Date: Fri, 17 Jan 2025 12:53:25 +0400
Subject: [PATCH] EPMRPP-98469 || Fix truncation of User Full Name in
 Organizations (#4162)

* EPMRPP-98469 || Fix truncation of User Full Name in Organizations

* EPMRPP-98469 || Code review fixes - 1

* EPMRPP-98469 || Code review fixes - 2
---
 .../membersPage/userNameCell/userNameCell.jsx | 46 ++++++++++---------
 .../userNameCell/userNameCell.scss            | 12 ++++-
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/app/src/pages/common/membersPage/userNameCell/userNameCell.jsx b/app/src/pages/common/membersPage/userNameCell/userNameCell.jsx
index d46980bd33..258619110a 100644
--- a/app/src/pages/common/membersPage/userNameCell/userNameCell.jsx
+++ b/app/src/pages/common/membersPage/userNameCell/userNameCell.jsx
@@ -31,28 +31,32 @@ export const UserNameCell = ({ user, badges }) => {
   return (
     <div className={cx('user-name-cell')}>
       <UserAvatar className={cx('user-avatar')} userId={user.id} thumbnail />
-      <div className={cx('full-name')}>{user.fullName}</div>
-      <div className={cx('badges')}>
-        {badges.map(({ title, type }) => {
-          const badgeContent = (
-            <div key={`${user.id}-${type}`} className={cx('badge', type)}>
-              {formatMessage(title)}
-            </div>
-          );
+      <div className={cx('name-badge-wrapper')}>
+        <div className={cx('full-name')}>{user.fullName}</div>
+        {badges.length > 0 && (
+          <div className={cx('badges')}>
+            {badges.map(({ title, type }) => {
+              const badgeContent = (
+                <div key={`${user.id}-${type}`} className={cx('badge', type)}>
+                  {formatMessage(title)}
+                </div>
+              );
 
-          return type === ADMIN_TYPE ? (
-            <Tooltip
-              key={`${user.id}-${type}-tooltip`}
-              content={formatMessage(messages.adminAccessInfo)}
-              placement="top"
-              width={248}
-            >
-              {badgeContent}
-            </Tooltip>
-          ) : (
-            badgeContent
-          );
-        })}
+              return type === ADMIN_TYPE ? (
+                <Tooltip
+                  key={`${user.id}-${type}-tooltip`}
+                  content={formatMessage(messages.adminAccessInfo)}
+                  placement="top"
+                  width={248}
+                >
+                  {badgeContent}
+                </Tooltip>
+              ) : (
+                badgeContent
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/app/src/pages/common/membersPage/userNameCell/userNameCell.scss b/app/src/pages/common/membersPage/userNameCell/userNameCell.scss
index 37c1fd00f0..30ff3443dc 100644
--- a/app/src/pages/common/membersPage/userNameCell/userNameCell.scss
+++ b/app/src/pages/common/membersPage/userNameCell/userNameCell.scss
@@ -27,8 +27,18 @@
     }
   }
 
-  .full-name {
+  .name-badge-wrapper {
+    display: flex;
+    align-items: center;
     margin-left: 16px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .full-name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
   .badges {