MINOR: fix the lineage node size and overflow issue on right panel (#18942)

* fix the lineage node size and overflow issue on right panel

* fix sonar issue

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EntityInfoDrawer.component.tsx

@@ -228,7 +228,7 @@ const EntityInfoDrawer = ({
 
           <Col span={24}>
             <EntityHeaderTitle
-              className="w-max-300"
+              className="w-max-350"
               deleted={selectedNode.deleted}
               displayName={selectedNode.displayName}
               icon={icon}

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomNode.utils.tsx

@@ -16,7 +16,6 @@ import React, { Fragment } from 'react';
 import { Handle, HandleProps, HandleType, Position } from 'reactflow';
 import { ReactComponent as MinusIcon } from '../../../assets/svg/control-minus.svg';
 import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-outlined.svg';
-import { NODE_WIDTH } from '../../../constants/Lineage.constants';
 import { EntityLineageNodeType } from '../../../enums/entity.enum';
 import { Column } from '../../../generated/entity/data/table';
 import { encodeLineageHandles } from '../../../utils/EntityLineageUtils';
@@ -156,8 +155,8 @@ export const getColumnContent = (
           })}
         </div>
         <Typography.Text
-          ellipsis={{ tooltip: true }}
-          style={{ maxWidth: NODE_WIDTH, color: 'inherit' }}>
+          className="custom-node-column-label"
+          ellipsis={{ tooltip: true }}>
           {getEntityName(column)}
         </Typography.Text>
       </span>

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx

@@ -83,8 +83,8 @@ const LineageNodeLabelV1 = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
   const breadcrumbs = getBreadcrumbsFromFqn(node.fullyQualifiedName ?? '');
 
   return (
-    <div className="w-76">
-      <div className="m-0 p-x-md p-y-xs">
+    <div className="custom-node-label-container">
+      <div className="w-full m-0 p-x-md p-y-xs">
         {breadcrumbs.length > 0 && (
           <div className="d-flex gap-2 items-center m-b-xs lineage-breadcrumb">
             {breadcrumbs.map((breadcrumb, index) => (

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less

@@ -295,9 +295,14 @@
       width: 14px;
       display: flex;
     }
+
+    .custom-node-column-label {
+      max-width: 140px;
+    }
   }
 
   .custom-node-constraint {
+    padding-left: 4px;
     padding-right: 12px;
   }
 }

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less

@@ -16,11 +16,18 @@
     width: 28px;
   }
 
-  .lineage-breadcrumb {
-    .lineage-breadcrumb-item {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+  .custom-node-label-container {
+    width: 19rem;
+    min-height: 84px;
+    display: flex;
+    align-items: center;
+
+    .lineage-breadcrumb {
+      .lineage-breadcrumb-item {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }

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

@@ -110,6 +110,9 @@
 .w-max-200 {
   max-width: 200px;
 }
+.w-max-350 {
+  max-width: 350px;
+}
 .w-max-400 {
   max-width: 400px;
 }

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

@@ -98,7 +98,10 @@ export const getTitle = (
       </div>
     </Link>
   ) : (
-    <Text className="entity-title" data-testid="entity-title">
+    <Text
+      className="entity-title"
+      data-testid="entity-title"
+      ellipsis={{ tooltip: true }}>
       {title}
     </Text>
   );

openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntitySummaryPanelUtils.mock.tsx

@@ -31,7 +31,10 @@ import { ReactComponent as IconExternalLink } from '../assets/svg/external-links
 const { Text } = Typography;
 
 export const mockTextBasedSummaryTitleResponse = (
-  <Text className="entity-title" data-testid="entity-title">
+  <Text
+    className="entity-title"
+    data-testid="entity-title"
+    ellipsis={{ tooltip: true }}>
     <span className="text-highlighter">title2</span>
   </Text>
 );
@@ -346,7 +349,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
   {
     name: 'api_client_id',
     title: (
-      <Text className="entity-title" data-testid="entity-title">
+      <Text
+        className="entity-title"
+        data-testid="entity-title"
+        ellipsis={{ tooltip: true }}>
         api_client_id
       </Text>
     ),
@@ -361,7 +367,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
   {
     name: 'Customer',
     title: (
-      <Text className="entity-title" data-testid="entity-title">
+      <Text
+        className="entity-title"
+        data-testid="entity-title"
+        ellipsis={{ tooltip: true }}>
         Customer
       </Text>
     ),
@@ -375,7 +384,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'id',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             id
           </Text>
         ),
@@ -389,7 +401,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'first_name',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             first_name
           </Text>
         ),
@@ -403,7 +418,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'last_name',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             last_name
           </Text>
         ),
@@ -417,7 +435,10 @@ export const mockEntityDataWithNestingResponse: BasicEntityInfo[] = [
       {
         name: 'email',
         title: (
-          <Text className="entity-title" data-testid="entity-title">
+          <Text
+            className="entity-title"
+            data-testid="entity-title"
+            ellipsis={{ tooltip: true }}>
             email
           </Text>
         ),
@@ -441,7 +462,10 @@ export const mockInvalidDataResponse = [
     name: '',
     tags: undefined,
     title: (
-      <Text className="entity-title" data-testid="entity-title">
+      <Text
+        className="entity-title"
+        data-testid="entity-title"
+        ellipsis={{ tooltip: true }}>
         --
       </Text>
     ),