fix(#14257): glossary term name get fully truncate for long text in glossary table (#14469)

* fix: glossary term name get fully truncate for long text

* fix a type issue in explore-page-v1 component

* fix some alignment of text and term icon

* fix the max width of name column in glossary table

* minor change

* minor change

* fix ellipsis issue for table column glossary term

* restrict term icon view based on height instead of width

* remove unwanted class

* revert back w-max-90 class

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx

@@ -109,27 +109,30 @@ const GlossaryTermTab = ({
         title: t('label.term-plural'),
         dataIndex: 'name',
         key: 'name',
-        className: 'glossary-name-column w-max-400 truncate',
+        className: 'glossary-name-column',
+        ellipsis: true,
+        width: '40%',
         render: (_, record) => {
           const name = getEntityName(record);
 
           return (
-            <Space align="center">
+            <>
               {record.style?.iconURL && (
                 <img
+                  className="m-r-xss vertical-baseline"
                   data-testid="tag-icon"
+                  height={12}
                   src={record.style.iconURL}
-                  width={16}
                 />
               )}
               <Link
-                className="cursor-pointer help-text"
+                className="cursor-pointer vertical-baseline"
                 data-testid={name}
                 style={{ color: record.style?.color }}
                 to={getGlossaryPath(record.fullyQualifiedName || record.name)}>
                 {name}
               </Link>
-            </Space>
+            </>
           );
         },
       },
@@ -137,6 +140,7 @@ const GlossaryTermTab = ({
         title: t('label.description'),
         dataIndex: 'description',
         key: 'description',
+        width: permissions.Create ? '21%' : '33%',
         render: (description: string) =>
           description.trim() ? (
             <RichTextEditorPreviewer
@@ -152,12 +156,14 @@ const GlossaryTermTab = ({
         title: t('label.owner'),
         dataIndex: 'owner',
         key: 'owner',
+        width: '15%',
         render: (owner: EntityReference) => <OwnerLabel owner={owner} />,
       },
       {
         title: t('label.status'),
         dataIndex: 'status',
         key: 'status',
+        width: '12%',
         filterIcon: FilterIcon,
         filters: StatusFilters,
         render: (_, record) => {
@@ -178,7 +184,7 @@ const GlossaryTermTab = ({
       data.push({
         title: t('label.action-plural'),
         key: 'new-term',
-        width: 80,
+        width: '12%',
         render: (_, record) => {
           const status = record.status ?? Status.Approved;
           const allowAddTerm = status === Status.Approved;
@@ -396,9 +402,8 @@ const GlossaryTermTab = ({
               loading={isTableLoading}
               pagination={false}
               rowKey="fullyQualifiedName"
-              scroll={{ x: true }}
               size="small"
-              tableLayout="auto"
+              tableLayout="fixed"
               onHeaderRow={onTableHeader}
               onRow={onTableRow}
             />

openmetadata-ui/src/main/resources/ui/src/pages/ExplorePage/ExplorePageV1.component.tsx

@@ -344,7 +344,7 @@ const ExplorePageV1: FunctionComponent = () => {
         const counts: Record<string, number> = {};
 
         buckets.forEach((item) => {
-          if (item && TABS_SEARCH_INDEXES.includes(item.key)) {
+          if (item && TABS_SEARCH_INDEXES.includes(item.key as SearchIndex)) {
             counts[item.key ?? ''] = item.doc_count;
           }
         });

openmetadata-ui/src/main/resources/ui/src/styles/components/size.less

@@ -116,9 +116,6 @@
 .w-max-fit-content {
   max-width: fit-content;
 }
-.w-max-95 {
-  max-width: 95%;
-}
 .w-300 {
   width: 300px;
 }

openmetadata-ui/src/main/resources/ui/src/styles/components/table.less

@@ -41,8 +41,8 @@
             }
 
             .expand-cell-empty-icon-container {
-              width: 18px;
-              height: 16px;
+              width: 8px;
+              height: 12px;
               display: inline-flex;
             }
           }

openmetadata-ui/src/main/resources/ui/src/styles/position.less

@@ -121,15 +121,9 @@
 }
 
 // Alignment Items
-.align-middle {
-  vertical-align: middle;
-}
 .self-end {
   align-self: flex-end;
 }
-.vertical-align-inherit {
-  vertical-align: inherit;
-}
 
 .self-center {
   align-self: center;
@@ -208,3 +202,11 @@
 .vertical-baseline {
   vertical-align: baseline;
 }
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.vertical-align-inherit {
+  vertical-align: inherit;
+}

openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsUtils.tsx

@@ -205,7 +205,6 @@ export const getGlobalSettingsMenuWithPermission = (
         },
       ],
     },
-
     {
       category: i18next.t('label.integration-plural'),
       key: 'integrations',

openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -505,23 +505,23 @@ export function getTableExpandableConfig<T>(
   const expandableConfig: ExpandableConfig<T> = {
     expandIcon: ({ expanded, onExpand, expandable, record }) =>
       expandable ? (
-        <div className="items-center inline">
+        <>
           {isDraggable && (
-            <IconDrag className="m-r-xs drag-icon" height={12} width={12} />
+            <IconDrag className="m-r-xs drag-icon" height={12} width={8} />
           )}
           <Icon
-            className="m-r-xs"
+            className="m-r-xs vertical-baseline"
             component={expanded ? IconDown : IconRight}
             data-testid="expand-icon"
             style={{ fontSize: '10px', color: TEXT_BODY_COLOR }}
             onClick={(e) => onExpand(record, e)}
           />
-        </div>
+        </>
       ) : (
         isDraggable && (
           <>
-            <IconDrag className="m-r-xs drag-icon" height={12} width={12} />
-            <div className="expand-cell-empty-icon-container" />
+            <IconDrag className="m-r-xs drag-icon" height={12} width={8} />
+            <span className="expand-cell-empty-icon-container" />
           </>
         )
       ),