Fixed the text overflow issues

openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx

@@ -677,16 +677,16 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
   const renderOverviewTab = () => {
     if (isColumnDataLoading) {
       return (
-        <div className="flex-center p-lg">
+        <div className="tw:flex tw:items-center tw:justify-center tw:p-6">
           <Loader size="default" />
         </div>
       );
     }
 
     return (
-      <Space className="w-full" direction="vertical" size="large">
+      <Space className="tw:w-full" direction="vertical" size="large">
         {isDescriptionLoading ? (
-          <div className="flex-center p-lg">
+          <div className="tw:flex tw:items-center tw:justify-center tw:p-6">
             <Loader size="small" />
           </div>
         ) : (
@@ -752,15 +752,15 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
   const renderLineageTab = () => {
     if (isLineageLoading) {
       return (
-        <div className="flex-center p-lg">
+        <div className="tw:flex tw:items-center tw:justify-center tw:p-6">
           <Loader size="default" />
         </div>
       );
     }
 
     if (!lineageData) {
       return (
-        <div className="text-center text-grey-muted p-lg">
+        <div className="tw:text-center tw:text-gray-400 tw:p-6">
           {t('label.no-data-found')}
         </div>
       );
@@ -782,7 +782,7 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
     }
 
     return (
-      <div className="overview-tab-content">
+      <div className="tw:h-auto">
         <CustomPropertiesSection
           emptyStateMessage={t('label.table-entity-text', {
             entityText: t('label.column-plural'),
@@ -803,23 +803,27 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
 
   const columnTitle = activeColumn ? (
     <div className="title-section">
-      <div className="tw:ml-4">
+      <div className="tw:ml-4 tw:flex tw:flex-wrap tw:items-center tw:overflow-hidden">
         {breadcrumbPath.length > 1 &&
           breadcrumbPath.map((breadcrumb, index) => {
             const isLastItem = index === breadcrumbPath.length - 1;
 
             return (
               <div
-                className="tw:inline-flex tw:items-center"
+                className="tw:inline-flex tw:items-center tw:min-w-0"
                 key={breadcrumb.fullyQualifiedName}>
-                <div className="tw:inline-flex tw:items-center tw:gap-0.5">
+                <div className="tw:inline-flex tw:items-center tw:gap-0.5 tw:min-w-0">
                   <Typography.Text
-                    className={classNames('tw:text-xs', {
-                      'tw:cursor-default tw:font-medium tw:text-gray-700':
-                        isLastItem,
-                      'tw:cursor-pointer tw:font-normal tw:text-gray-400 hover:tw:underline':
-                        !isLastItem,
-                    })}
+                    className={classNames(
+                      'tw:text-xs tw:truncate tw:max-w-32',
+                      {
+                        'tw:cursor-default tw:font-medium tw:text-gray-700':
+                          isLastItem,
+                        'tw:cursor-pointer tw:font-normal tw:text-gray-400 hover:tw:underline':
+                          !isLastItem,
+                      }
+                    )}
+                    title={getEntityName(breadcrumb)}
                     onClick={
                       isLastItem
                         ? undefined
@@ -829,7 +833,7 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
                   </Typography.Text>
                   {index < breadcrumbPath.length - 1 && (
                     <ChevronRight
-                      className="tw:text-gray-400"
+                      className="tw:text-gray-400 tw:shrink-0"
                       height={16}
                       width={16}
                     />
@@ -839,14 +843,16 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
             );
           })}
       </div>
-      <div className="title-container items-start gap-4">
-        <div className="d-flex items-center justify-between w-full">
-          <div className="d-flex items-center w-full">
-            <div className="tw:mr-2 tw:flex tw:h-10 tw:w-10 tw:items-center tw:justify-center tw:rounded tw:shadow-sm">
+      <div className="title-container tw:items-start tw:gap-4">
+        <div className="tw:flex tw:items-center tw:justify-between tw:w-full tw:min-w-0 tw:overflow-hidden">
+          <div
+            className="tw:flex tw:items-center tw:min-w-0 tw:overflow-hidden tw:pr-4"
+            style={{ flex: 1 }}>
+            <div className="tw:mr-2 tw:flex tw:shrink-0 tw:h-10 tw:w-10 tw:items-center tw:justify-center tw:rounded tw:shadow-sm">
               <ColumnIcon className="tw:h-5 tw:w-5 tw:text-gray-700" />
             </div>
-            <div className="d-flex flex-column w-full overflow-hidden">
-              <div className="d-flex items-center gap-2 w-full">
+            <div className="tw:flex tw:flex-col tw:min-w-0 tw:flex-1 tw:overflow-hidden">
+              <div className="tw:flex tw:items-center tw:gap-2 tw:min-w-0 tw:overflow-hidden">
                 <Tooltip
                   mouseEnterDelay={0.5}
                   placement="topLeft"
@@ -892,15 +898,15 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
                 (entityType === EntityType.TABLE ||
                   entityType === EntityType.DASHBOARD_DATA_MODEL) && (
                   <Typography.Text
-                    className="text-grey-muted text-xs"
+                    className="tw:text-gray-400 tw:text-xs"
                     data-testid="entity-name"
                     ellipsis={{ tooltip: true }}>
                     {stringToHTML(activeColumn.name || '')}
                   </Typography.Text>
                 )}
             </div>
           </div>
-          <div>
+          <div className="tw:shrink-0">
             <Button
               color="secondary"
               data-testid="close-button"
@@ -910,13 +916,16 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
             />
           </div>
         </div>
-        <div className="d-flex items-center gap-2">
+        <div className="tw:flex tw:items-center tw:gap-2">
           {isColumn(activeColumn) && getDataTypeDisplay(activeColumn) && (
             <Tooltip
               placement="bottom"
               title={getDataTypeDisplay(activeColumn)}
               trigger="hover">
-              <div className="tw:max-w-60 flex-center tw:overflow-hidden tw:text-ellipsis data-type-chip">
+              <div
+                className="tw:max-w-60 tw:flex tw:items-center tw:justify-center tw:overflow-hidden
+                  tw:text-ellipsis data-type-chip
+                  ">
                 {getDataTypeDisplay(activeColumn) || ''}
               </div>
             </Tooltip>
@@ -947,20 +956,14 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
           />
         );
       case EntityRightPanelTab.LINEAGE:
-        return <div className="overview-tab-content">{renderLineageTab()}</div>;
+        return <div className="tw:h-auto">{renderLineageTab()}</div>;
       case EntityRightPanelTab.CUSTOM_PROPERTIES:
-        return (
-          <div className="overview-tab-content">
-            {renderCustomPropertiesTab()}
-          </div>
-        );
+        return <div className="tw:h-auto">{renderCustomPropertiesTab()}</div>;
       case EntityRightPanelTab.RELATIONS:
         return null;
       case EntityRightPanelTab.OVERVIEW:
       default:
-        return (
-          <div className="overview-tab-content">{renderOverviewTab()}</div>
-        );
+        return <div className="tw:h-auto">{renderOverviewTab()}</div>;
     }
   };
 
@@ -969,8 +972,8 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
   }
 
   const navFooter = (
-    <div className="d-flex justify-between items-center w-full navigation-container">
-      <div className="d-flex items-center gap-1 m-t-sm">
+    <div className="tw:flex tw:justify-between tw:items-center tw:w-full navigation-container">
+      <div className="tw:flex tw:items-center tw:gap-1 tw:mt-2">
         <Button
           color="secondary"
           iconLeading={ChevronUp}
@@ -986,7 +989,7 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
           onClick={handleNextColumn}
         />
         {isColumnInList && flattenedColumns.length > 0 && (
-          <Typography.Text className="pagination-header-text text-medium">
+          <Typography.Text className="pagination-header-text tw:font-medium">
             {actualColumnIndex + 1} {t('label.of-lowercase')}{' '}
             {flattenedColumns.length} {t('label.column-plural').toLowerCase()}
           </Typography.Text>
@@ -1016,18 +1019,20 @@ export const ColumnDetailPanel = <T extends ColumnOrTask = Column>({
         </div>
       )}
       <div className="column-detail-panel-container">
-        <div className="d-flex gap-2">
+        <div className="tw:flex tw:gap-2 tw:h-full">
           <Card bordered={false} className="summary-panel-container">
-            <Card className="content-area" style={{ width: '100%' }}>
+            <Card
+              className="tw:h-full tw:overflow-y-auto tw:max-h-full"
+              style={{ width: '100%' }}>
               {renderTabContent()}
             </Card>
           </Card>
-          <div className="m-r-sm">
+          <div className="tw:mr-2">
             <EntityRightPanelVerticalNav
               isColumnDetailPanel
               activeTab={activeTab}
               entityType={entityType}
-              verticalNavConatinerclassName="column-detail-panel-vertical-nav"
+              verticalNavConatinerclassName="tw:w-[70px]"
               onTabChange={handleTabChange}
             />
           </div>

openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.less

@@ -63,6 +63,14 @@
 
     .ant-drawer-header-title {
       width: 100%;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    .ant-drawer-title {
+      width: 100%;
+      min-width: 0;
+      overflow: hidden;
     }
   }
 
@@ -73,6 +81,9 @@
 
   .title-section {
     padding-bottom: 0;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
     .data-type-chip {
       width: fit-content;
       border: 1px solid @blue-30;
@@ -90,6 +101,7 @@
       padding: 16px 12px;
       padding-top: 8px;
       border-radius: 6px;
+      overflow: hidden;
 
       background-color: @grey-9;
 
@@ -98,8 +110,31 @@
         font-weight: 600;
         color: @grey-900;
         text-decoration: none;
+        min-width: 0;
+        flex: 1;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 95%;
       }
     }
+
+    .title-row {
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    .title-text-column {
+      min-width: 0;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .title-name-row {
+      min-width: 0;
+      overflow: hidden;
+    }
   }
 
   .column-detail-panel-container {

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

@@ -426,7 +426,7 @@ const CustomControls: FC<{
             <Tabs
               selectedKey={activeTab}
               onSelectionChange={(key) => handleTabChange(key as string)}>
-              <Tabs.List size="sm" type="button-brand">
+              <Tabs.List size="sm" type="button-border">
                 <Tabs.Item id="lineage" key="lineage">
                   {t('label.lineage')}
                 </Tabs.Item>

openmetadata-ui/src/main/resources/ui/src/components/common/EntityTitleSection/EntityTitleSection.tsx

@@ -138,7 +138,7 @@ export const EntityTitleSection = ({
           placement={tooltipPlacement}
           title={getTextFromHtmlString(entityName)}
           trigger="hover">
-          <TooltipTrigger>
+          <TooltipTrigger className="tw:max-w-[75%]">
             <Link
               className="tw:min-w-0 tw:overflow-hidden tw:text-sm tw:font-semibold tw:truncate tw:no-underline tw:text-blue-700 tw:block"
               data-testid={testId}

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/ClassificationFormDrawer.tsx

@@ -43,8 +43,10 @@ const ClassificationFormDrawer: FC<ClassificationFormDrawerProps> = ({
 
   return (
     <SlideoutMenu
+      className="tw:z-999"
       data-testid="classification-form-drawer"
       isOpen={open}
+      width={480}
       onOpenChange={handleOpenChange}>
       {({ close }) => (
         <>

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagFormDrawer.tsx

@@ -47,8 +47,10 @@ const TagFormDrawer: FC<TagFormDrawerProps> = ({
 
   return (
     <SlideoutMenu
+      className="tw:z-999"
       data-testid="tag-form-drawer"
       isOpen={open}
+      width={480}
       onOpenChange={handleOpenChange}>
       {({ close }) => (
         <>

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx

@@ -693,6 +693,7 @@ const TagsPage = () => {
                 key={category.name}
                 onClick={() => onClickClassifications(category)}>
                 <Typography
+                  ellipsis
                   as="p"
                   className={classNames('tw:truncate', {
                     'tw:font-bold tw:text-brand-600':