From 9a55d4efb54bca93ce7e1f4ba40b32101f5732a7 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Fri, 14 Jan 2022 19:46:42 +0530
Subject: [PATCH] Fix: issue 2098, 2099 & 2192: Resolve text overflow issue
 (#2216)

---
 .../ui/src/components/UserList/UserList.tsx     |  4 +++-
 .../resources/ui/src/pages/services/index.tsx   |  5 +++--
 .../resources/ui/src/pages/teams/UserCard.tsx   | 17 +++++++++++++++--
 .../main/resources/ui/src/pages/teams/index.tsx |  2 +-
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
index ad98b84b310..2bb6c9ef501 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
@@ -249,7 +249,9 @@ const UserList: FunctionComponent<Props> = ({
                 className={`tw-group tw-text-grey-body tw-text-body tw-flex tw-justify-between ${getCurrentTeamClass(
                   team.name
                 )}`}>
-                <p className="tw-text-center tag-category tw-self-center">
+                <p
+                  className="tag-category tw-self-center tw-truncate tw-w-48"
+                  title={team.displayName}>
                   {team.displayName}
                 </p>
               </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
index 558bd870581..7ae1748dc79 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
@@ -532,8 +532,9 @@ const ServicesPage = () => {
                             )}>
                             <button>
                               <h6
-                                className="tw-text-base tw-text-grey-body tw-font-medium"
-                                data-testid={`service-name-${service.name}`}>
+                                className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
+                                data-testid={`service-name-${service.name}`}
+                                title={service.name}>
                                 {service.name}
                               </h6>
                             </button>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
index 4b80f54d0bd..814d90e1568 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
@@ -138,8 +138,21 @@ const UserCard = ({
             <>{getDatasetTitle(item.name, item.description)}</>
           ) : (
             <>
-              <p className="tw-font-normal">{item.description}</p>
-              <p>{isIconVisible ? item.name : capitalize(item.name)}</p>
+              <p
+                className={classNames(
+                  'tw-font-normal',
+                  isActionVisible ? 'tw-truncate tw-w-32' : null
+                )}
+                title={item.description}>
+                {item.description}
+              </p>
+              <p
+                className={classNames(
+                  isActionVisible ? 'tw-truncate tw-w-32' : null
+                )}
+                title={isIconVisible ? item.name : capitalize(item.name)}>
+                {isIconVisible ? item.name : capitalize(item.name)}
+              </p>
             </>
           )}
         </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
index f219c946d31..5790f039735 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
@@ -341,7 +341,7 @@ const TeamsPage = () => {
                 changeCurrentTeam(team.name);
               }}>
               <p
-                className="tw-text-center tag-category label-category tw-self-center tw-truncate"
+                className="tag-category label-category tw-self-center tw-truncate tw-w-52"
                 title={team.displayName}>
                 {team.displayName}
               </p>