From 3f0693bad62ae53cae3cd74c19996bb08a4bf171 Mon Sep 17 00:00:00 2001
From: Denys Malofeiev <77440017+Dekshut@users.noreply.github.com>
Date: Mon, 21 Feb 2022 13:53:55 +0200
Subject: [PATCH] fixed problem with performance of cluster name in left side
 (#1635)

---
 .../src/components/Nav/ClusterTab/ClusterTab.styled.ts      | 6 +++++-
 .../src/components/Nav/ClusterTab/ClusterTab.tsx            | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
index 1989d5040a..082cca5123 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
@@ -28,8 +28,12 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
   `
 );
 
-export const Title = styled.span`
+export const Title = styled.div`
   grid-area: title;
+  white-space: nowrap;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const StatusIconWrapper = styled.svg.attrs({
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
index b01e357a87..98cded2ae6 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
@@ -17,7 +17,7 @@ const ClusterTab: React.FC<ClusterTabProps> = ({
   toggleClusterMenu,
 }) => (
   <S.Wrapper onClick={toggleClusterMenu}>
-    <S.Title>{title}</S.Title>
+    <S.Title title={title}>{title}</S.Title>
 
     <S.StatusIconWrapper>
       <S.StatusIcon status={status} aria-label="status">