From 4dfd86980c16713cd52a81a3887c3087e99c2033 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 19 Jan 2023 00:01:35 +0800
Subject: [PATCH] style(console): text ellipsis in user roles table (#2985)

---
 .../src/pages/UserDetails/UserRoles/index.module.scss | 11 +++++++++--
 .../console/src/pages/UserDetails/UserRoles/index.tsx |  8 ++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/console/src/pages/UserDetails/UserRoles/index.module.scss b/packages/console/src/pages/UserDetails/UserRoles/index.module.scss
index 1644b8fd6..f6f5ebd05 100644
--- a/packages/console/src/pages/UserDetails/UserRoles/index.module.scss
+++ b/packages/console/src/pages/UserDetails/UserRoles/index.module.scss
@@ -17,9 +17,16 @@
 
   tbody {
     td {
-      max-width: 100%;
-      @include _.text-ellipsis;
       font: var(--font-body-medium);
     }
   }
+
+  .name {
+    display: block;
+    @include _.text-ellipsis;
+  }
+
+  .description {
+    @include _.text-ellipsis;
+  }
 }
diff --git a/packages/console/src/pages/UserDetails/UserRoles/index.tsx b/packages/console/src/pages/UserDetails/UserRoles/index.tsx
index 5d3b3051f..2e3a67428 100644
--- a/packages/console/src/pages/UserDetails/UserRoles/index.tsx
+++ b/packages/console/src/pages/UserDetails/UserRoles/index.tsx
@@ -81,13 +81,17 @@ const UserRoles = () => {
             title: t('user_details.roles.name_column'),
             dataIndex: 'name',
             colSpan: 6,
-            render: ({ id, name }) => <TextLink to={`/roles/${id}`}>{name}</TextLink>,
+            render: ({ id, name }) => (
+              <TextLink className={styles.name} to={`/roles/${id}`}>
+                {name}
+              </TextLink>
+            ),
           },
           {
             title: t('user_details.roles.name_column'),
             dataIndex: 'description',
             colSpan: 9,
-            render: ({ description }) => description,
+            render: ({ description }) => <div className={styles.description}>{description}</div>,
           },
           {
             title: null,