fixed problem with performance of cluster name in left side (#1635)

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({

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">