Split ingress rules by multiple lines

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;
+      > div {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      > div + div {
+        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}>
                     <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}>
                     {`${decl.url} ⇢ ${decl.service}`}
-                  </span>
+                  </div>
                 )
             )),
             <KubeObjectAge key="age" object={ingress} />,