Hyphens in dashboards names should not be treated as carriage return
**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->

In the menu to the left side the dashboards names containing an hyphen are split in two lines.
```
UI for Apache UI    Version: v0.3.3 (38c4cf7)

  Dashboard
    silos-
    kafka

      Brokers
```
We should see here `silos-kafka` in a single row
```
UI for Apache UI    Version: v0.3.3 (38c4cf7)

  Dashboard
    silos-kafka

      Brokers
```

**Set up**
<!--
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
-->

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Set in the helm values `KAFKA_CLUSTERS_0_NAME` as shown in the following code snippet:
```
kafka-ui:
  envs:
    config:
      KAFKA_CLUSTERS_0_NAME: silos-kafka
```
2. Look at the UI

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->

The name should not be split in two lines

**Additional context**
<!--
(Add any other context about the problem here)
-->

Version: v0.3.3 (38c4cf7)
kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
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 1989d5040a4..082cca51233 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 b01e357a87a..98cded2ae65 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">
