From 3d62d1c029fe9398f3d91839541a7a105dfe1ae6 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 2 Aug 2022 15:24:53 +0300
Subject: [PATCH] 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>
---
 .../components/+network-ingresses/ingresses.scss    | 13 +++++++++++--
 .../components/+network-ingresses/ingresses.tsx     |  8 ++++----
 .../components/virtual-list/virtual-list.tsx        |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/+network-ingresses/ingresses.scss b/src/renderer/components/+network-ingresses/ingresses.scss
index 6b072b5ed5..960ba3702f 100644
--- a/src/renderer/components/+network-ingresses/ingresses.scss
+++ b/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;
       }
     }
 
diff --git a/src/renderer/components/+network-ingresses/ingresses.tsx b/src/renderer/components/+network-ingresses/ingresses.tsx
index e117bc5a8e..1ca8589f80 100644
--- a/src/renderer/components/+network-ingresses/ingresses.tsx
+++ b/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} />,
diff --git a/src/renderer/components/virtual-list/virtual-list.tsx b/src/renderer/components/virtual-list/virtual-list.tsx
index 3f318b5e9f..3ea0aebb1c 100644
--- a/src/renderer/components/virtual-list/virtual-list.tsx
+++ b/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;