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
reportportal · Jan 17, 2025 · fb9e894 · fb9e894
1 parent 058ddf2
commit fb9e894
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git 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
@@ -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 {