style(NodesTable): don't reserve space for icons next to node fqdn

Author: ariser

src/components/EntityStatus/EntityStatus.scss

@@ -9,8 +9,7 @@
     line-height: var(--yc-text-body2-line-height);
 
     &__clipboard-button {
-        display: flex;
-        visibility: hidden;
+        display: none;
         align-items: center;
 
         margin-left: 8px;
@@ -22,7 +21,7 @@
         }
 
         &_visible {
-            visibility: visible;
+            display: flex;
         }
     }
 

src/containers/App/App.scss

@@ -144,7 +144,7 @@ body,
 }
 
 .data-table__row:hover .entity-status__clipboard-button {
-    visibility: visible;
+    display: flex;
 }
 
 .no-problem {

src/containers/App/NodesTable.scss

@@ -1,7 +1,10 @@
 .kv-nodes {
+    &__host-name-wrapper {
+        display: flex;
+    }
+
     &__external-button {
-        display: inline-flex;
-        visibility: hidden;
+        display: none;
         align-items: center;
 
         margin-left: 4px;
@@ -14,12 +17,12 @@
     }
 
     &__host-name {
-        width: 90%;
+        overflow: hidden;
     }
 }
 
 .data-table__row:hover {
     .kv-nodes__external-button {
-        visibility: visible;
+        display: inline-flex;
     }
 }

src/utils/getNodesColumns.js

@@ -31,7 +31,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                     return <span>—</span>;
                 }
                 return (
-                    <React.Fragment>
+                    <div className={b('host-name-wrapper')}>
                         <EntityStatus
                             name={row.Host}
                             status={row.Overall}
@@ -44,7 +44,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                                 <Icon name="external" />
                             </Button>
                         )}
-                    </React.Fragment>
+                    </div>
                 );
             },
             width: '350px',