Fix ingress list line heights (#5949)

* Split ingress rules by multiple lines

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Force updating virtual list when rowHeights changed

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Replacing simple div selectors with more specific

.ingressRule classnames

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+network-ingresses/ingresses.scss

@@ -5,6 +5,10 @@
 
 .Ingresses {
   .TableCell {
+    &.checkbox .Checkbox {
+      align-items: flex-start;
+    }
+
     &.rules {
       flex-grow: 3.0;
       overflow-x: scroll;
@@ -14,8 +18,13 @@
         display: none;
       }
 
-      span:not(:last-of-type) {
-        margin-right: 1em;
+      .ingressRule {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .ingressRule + .ingressRule {
+        margin-top: 6px;
       }
     }
 

src/renderer/components/+network-ingresses/ingresses.tsx

@@ -58,7 +58,7 @@ export class Ingresses extends React.Component {
             computeRouteDeclarations(ingress).map(decl => (
               decl.displayAsLink
                 ? (
-                  <span key={decl.url}>
+                  <div key={decl.url} className="ingressRule">
                     <a
                       href={decl.url}
                       rel="noreferrer"
@@ -68,12 +68,12 @@ export class Ingresses extends React.Component {
                       {decl.url}
                     </a>
                     {` ⇢ ${decl.service}`}
-                  </span>
+                  </div>
                 )
                 : (
-                  <span key={decl.url}>
+                  <div key={decl.url} className="ingressRule">
                     {`${decl.url} ⇢ ${decl.service}`}
-                  </span>
+                  </div>
                 )
             )),
             <KubeObjectAge key="age" object={ingress} />,

src/renderer/components/virtual-list/virtual-list.tsx

@@ -87,7 +87,7 @@ function VirtualListInner<T extends { getId(): string } | string>({
   useEffect(() => {
     try {
       if (prevItems.current.length !== items.length || !isEqual(prevRowHeights.current, rowHeights)) {
-        listRef.current?.resetAfterIndex(0, false);
+        listRef.current?.resetAfterIndex(0);
       }
     } finally {
       prevItems.current = items;