From f79c597e43e6068b31fa76ec554e41d20abf6750 Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Tue, 10 Jun 2025 04:34:24 +0530
Subject: [PATCH] fix(ui): explore tabs with elipsis to render label and count
 properly (#21663)

(cherry picked from commit cb57656ae98997d6c4addc973cfa630bb5c884d1)
---
 .../resources/ui/src/components/ExploreV1/exploreV1.less   | 7 +++++++
 .../src/main/resources/ui/src/utils/ExploreUtils.tsx       | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less
index eb9890fdeb2..3ffbc7a7e62 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/exploreV1.less
@@ -32,6 +32,13 @@
     height: 16px;
   }
 
+  .explore-tab-label {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
   .explore-left-panel {
     position: sticky;
     top: 0;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ExploreUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ExploreUtils.tsx
index 7f4a0777be3..b3e636e2ac3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/ExploreUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/ExploreUtils.tsx
@@ -470,12 +470,13 @@ export const generateTabItems = (
         <div
           className="d-flex items-center justify-between"
           data-testid={`${lowerCase(tabDetail.label)}-tab`}>
-          <div className="d-flex items-center">
+          <div className="explore-tab-label">
             <span className="explore-icon d-flex m-r-xs">
               <Icon />
             </span>
             <Typography.Text
-              className={tabSearchIndex === searchIndex ? 'text-primary' : ''}>
+              className={tabSearchIndex === searchIndex ? 'text-primary' : ''}
+              ellipsis={{ tooltip: true }}>
               {tabDetail.label}
             </Typography.Text>
           </div>