fix(Tenant): display tenant name in single line

Author: ariser

src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -1,9 +1,10 @@
 .kv-detailed-overview {
     display: flex;
-    gap: 10px;
+    gap: 20px;
     &__section {
         display: flex;
-        flex: 0 0 50%;
+        overflow-x: hidden;
+        flex: 0 0 calc(50% - 10px);
         flex-direction: column;
     }
 

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -25,9 +25,11 @@ const renderName = (tenant) => {
     if (tenant) {
         const {Name} = tenant;
         return (
-            <div className={b('tenant-name')}>
+            <div className={b('tenant-name-wrapper')}>
                 <EntityStatus status={tenant.State} />
-                <span>{Name}</span>
+                <span className={b('tenant-name-trim')}>
+                    <span className={b('tenant-name')}>{Name}</span>
+                </span>
             </div>
         );
     }

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -4,14 +4,26 @@
         display: flex;
         justify-content: center;
     }
-    &__tenant-name {
+    &__tenant-name-wrapper {
         display: flex;
+        overflow: hidden;
         align-items: center;
 
         & .yc-link {
             display: flex;
         }
     }
+    &__tenant-name-trim {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        direction: rtl;
+    }
+
+    &__tenant-name {
+        unicode-bidi: plaintext;
+    }
 
     &__top {
         display: flex;