Merge pull request #164 from Icinga/fix/icinga-state-reason-shifts

Fix icinga state reason shift problems

Author: lippserd

library/Kubernetes/Web/Widget/HighlightDelta.php

@@ -16,11 +16,14 @@ class HighlightDelta extends BaseHtmlElement
 
     public function __construct(
         protected string $long,
-        protected string $short
+        protected string $short,
+        ?Attributes $attributes = null
     ) {
         if (!str_contains($long, $short)) {
             throw new InvalidArgumentException('Short name must be part of long name');
         }
+
+        $this->addAttributes($attributes);
     }
 
     public function assemble(): void

library/Kubernetes/Web/Widget/IcingaStateReason/IcingaStateReasonRow.php

@@ -31,14 +31,21 @@ public function __construct(
     public function assemble(): void
     {
         $this->addHtml(
-            new StateBall(strtolower($this->state), StateBall::SIZE_MEDIUM),
-            Factory::createIcon($this->kind),
             new HtmlElement(
                 'span',
-                new Attributes(['class' => 'text']),
-                (new HighlightDelta($this->name, $this->parentName ?? ''))
-                    ->addAttributes(['class' => 'tooltip-holder', 'title' => $this->tooltip]),
-                new HtmlElement('span', new Attributes(['class' => 'reason']), new Text($this->reason))
+                new Attributes(['class' => 'icon-container']),
+                new StateBall(strtolower($this->state), StateBall::SIZE_MEDIUM),
+                Factory::createIcon($this->kind)
+            ),
+            new HtmlElement(
+                'span',
+                new Attributes(['class' => 'reason']),
+                new HighlightDelta(
+                    $this->name,
+                    $this->parentName ?? '',
+                    new Attributes(['class' => 'tooltip-holder', 'title' => $this->tooltip])
+                ),
+                new Text(' ' . $this->reason)
             )
         );
     }

public/css/common.less

@@ -24,10 +24,10 @@ pre {
 }
 
 .container-list-item > .visual > .state-ball,
-.container-list-item .caption .icinga-state-reason > .state-ball,
-.container-row > .state-ball,
+.container-list-item .caption .icinga-state-reason > .icon-container > .state-ball,
+.container-row > .icon-container > .state-ball,
 .container-detail > .details > .horizontal-key-value > .value > .state-ball,
-.container-detail > section > .icinga-state-reason > .state-ball {
+.container-detail > section > .icinga-state-reason > .icon-container > .state-ball {
   // Display squares instead of balls for containers.
   border-radius: initial;
 }

public/css/icinga-state-reason.less

@@ -1,18 +1,19 @@
 .icinga-state-reason {
+  .icon-container {
+    display: flex;
+    align-items: center;
+  }
   .state-ball {
     flex-shrink: 0;
     margin-right: .4em;
   }
 
   .row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
 
-    .text {
-      display: flex;
-      gap: .25em;
+    .reason {
       color: @text-color-light;
-      .text-ellipsis();
     }
 
     .highlight-text {
@@ -24,15 +25,23 @@
 .object-detail :not(.caption) > .icinga-state-reason {
   line-height: 1.75em;
 
-  .reason {
-    color: @text-color-light;
+  .icon-container {
+    height: 1.75em;
   }
 }
 
 .caption > .icinga-state-reason {
   font-size: 0.91666667em;
   line-height: 1.63636364em;
 
+  .icon-container {
+    height: 1.63636364em;
+  }
+
+  .reason {
+    .text-ellipsis();
+  }
+
   .tooltip-holder {
     pointer-events: none;
   }
@@ -41,17 +50,17 @@
 .workload-rows,
 .pod-rows,
 .container-rows {
-  transform: translateX(.75em);
+  margin-left: .75em;
 
   .row:before {
     content: '';
 
-    width: 1em;
+    min-width: 1em;
     height: 1em;
     border-left: 1px solid @gray-light;
     border-bottom: 1px solid @gray-light;
 
-    transform: translateX(~"calc(-.375em - 0.5px)") translateY(~"calc(-0.5em + 0.5px)");
+    transform: translateX(~"calc(-.375em - 0.5px)") translateY(-1px);
   }
 }
 
@@ -65,5 +74,5 @@
 .workload-rows .pod-rows,
 .pod-rows .container-rows {
   // level-indicator (1em) + state-ball margin (0.4em) + half state-ball size m (0.375em)
-  transform: translateX(~"calc(" 1em + .4em + .375em ~"- 0.5px)");
+  margin-left: ~"calc(" 1em + .4em + .375em ~"- 0.5px)";
 }