style(console): text ellipsis in roles table (#2984)

packages/console/src/components/ItemPreview/index.module.scss

@@ -11,9 +11,10 @@
 
   .content {
     padding-right: _.unit(4);
-    max-width: 100%;
+    overflow: hidden;
 
     .title {
+      display: block;
       font: var(--font-body-medium);
       color: var(--color-text-link);
       text-decoration: none;

packages/console/src/pages/Roles/index.module.scss

@@ -1,3 +1,9 @@
+@use '@/scss/underscore' as _;
+
 .search {
   width: 306px;
 }
+
+.description {
+  @include _.text-ellipsis;
+}

packages/console/src/pages/Roles/index.tsx

@@ -77,7 +77,7 @@ const Roles = () => {
             title: t('roles.role_description'),
             dataIndex: 'description',
             colSpan: 6,
-            render: ({ description }) => description,
+            render: ({ description }) => <div className={styles.description}>{description}</div>,
           },
           {
             title: <span>{t('roles.assigned_users')}</span>,