Handle long item names

configuration.php

@@ -62,3 +62,4 @@ $this->provideRestriction(
 $this->provideJsFile('vendor/Sortable.js');
 $this->provideJsFile('behavior/sortable.js');
 $this->provideJsFile('vendor/jquery.fn.sortable.js');
+$this->provideCssFile('mixins.less');

library/Businessprocess/Renderer/Breadcrumb.php

@@ -8,6 +8,7 @@ use Icinga\Module\Businessprocess\Web\Url;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
 use ipl\Web\Widget\Icon;
+use ipl\Html\HtmlElement;
 
 class Breadcrumb extends BaseHtmlElement
 {
@@ -42,7 +43,11 @@ class Breadcrumb extends BaseHtmlElement
             )
         ));
         $breadcrumb->add(Html::tag('li')->add(
-            Html::tag('a', ['href' => $bpUrl], $bp->getTitle())
+            Html::tag(
+                'a',
+                ['href' => $bpUrl],
+                HtmlElement::create('span', ['class' => 'text', 'title' => $bp->getTitle()], $bp->getTitle())
+            )
         ));
         $path = $renderer->getCurrentPath();
 

library/Businessprocess/Renderer/TileRenderer/NodeTile.php

@@ -13,6 +13,7 @@ use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
 use ipl\Web\Widget\Icon;
 use ipl\Web\Widget\Link;
+use ipl\Html\HtmlElement;
 use ipl\Web\Widget\StateBall;
 
 class NodeTile extends BaseHtmlElement
@@ -88,6 +89,14 @@ class NodeTile extends BaseHtmlElement
         if (! $node instanceof ImportedNode || $node->getBpConfig()->hasNode($node->getName())) {
             $link = $this->getMainNodeLink();
             if ($renderer->isBreadcrumb()) {
+                $link->setContent(
+                    HtmlElement::create(
+                        'span',
+                        ['class' => ['text', 'process-title'], 'title' => $link->getContent()],
+                        $link->getContent()
+                    )
+                );
+
                 $state = strtolower($node->getStateName());
                 if ($node->isHandled()) {
                     $state = $state . ' handled';
@@ -179,7 +188,7 @@ class NodeTile extends BaseHtmlElement
                 $node->getAlias() ?? $node->getName()
             );
         } else {
-            $link = Html::tag('a', ['href' => $url], $node->getAlias());
+            $link = Html::tag('a', ['href' => $url, 'title' => $node->getAlias()], $node->getAlias());
         }
 
         return $link;

library/Businessprocess/Renderer/TreeRenderer.php

@@ -218,7 +218,7 @@ class TreeRenderer extends Renderer
 
         $summary->add($this->getNodeIcons($node, $path));
 
-        $summary->add(Html::tag('span', null, $node->getAlias()));
+        $summary->add(Html::tag('span', ['class' => 'text', 'title' => $node->getAlias()], $node->getAlias()));
 
         if ($node instanceof BpNode) {
             $summary->add(Html::tag('span', ['class' => 'op'], $node->operatorHtml()));

library/Businessprocess/Web/Component/BpDashboardTile.php

@@ -22,8 +22,8 @@ class BpDashboardTile extends BaseHtmlElement
             'div',
             ['class' => 'bp-link', 'data-base-target' => '_main'],
             (new Link(new Icon($icon), Url::fromPath($url, $urlParams ?: []), $attributes))
-                ->add(Html::tag('span', ['class' => 'header'], $title))
-                ->add($description)
+                ->add(Html::tag('span', ['class' => ['header', 'text'], 'title' => $title], $title))
+                ->add(Html::tag('span', ['class' => 'text', 'title' => $description], $description))
         ));
 
         $tiles = Html::tag('div', ['class' => 'bp-root-tiles']);

library/Businessprocess/Web/Component/Dashboard.php

@@ -11,7 +11,9 @@ use Icinga\Module\Businessprocess\State\IcingaDbState;
 use Icinga\Module\Businessprocess\State\MonitoringState;
 use Icinga\Module\Businessprocess\Storage\Storage;
 use ipl\Html\BaseHtmlElement;
+use ipl\Html\FormattedString;
 use ipl\Html\Html;
+use ipl\Html\HtmlElement;
 
 class Dashboard extends BaseHtmlElement
 {

public/css/mixins.less

@@ -0,0 +1,10 @@
+.line-clamp(@numOfLines: 2) when (@numOfLines > 1) {
+  display: -webkit-box;
+  -webkit-line-clamp: @numOfLines;
+  -webkit-box-orient: vertical;
+}
+
+.text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

public/css/module.less

@@ -181,6 +181,13 @@ ul.bp {
         > span {
             font-size: 1.25em;
 
+            &.text {
+                flex: 1 1 auto;
+                width: 0;
+                .text-ellipsis();
+                white-space: nowrap;
+            }
+
             &.op {
                 padding: .1em .5em;
                 border-radius: .5em;
@@ -344,6 +351,10 @@ ul.broken-files {
         }
 
         .bp-link {
+            .text {
+                .line-clamp(2);
+            }
+
             > a {
                 text-decoration: none;
                 color: @gray;
@@ -354,6 +365,14 @@ ul.broken-files {
 
                 > span.header {
                     color: @text-color;
+
+                    .header-id {
+                        display: block;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        max-width: 100%;
+                    }
                 }
             }
         }
@@ -450,7 +469,8 @@ td > a > .state-badges {
 .tiles > div {
     color: @text-color-on-icinga-blue;
     width: 12em;
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
     float: left;
     vertical-align: top;
     margin-right: 0.2em;
@@ -464,11 +484,8 @@ td > a > .state-badges {
     }
 
     .state-badges {
-        position: absolute;
-        bottom: 0;
-        right: 0;
+        text-align: end;
         margin: 0.5em;
-        text-align: center;
         font-size: 0.5em;
     }
 
@@ -483,12 +500,17 @@ td > a > .state-badges {
 
     > a {
         display: block;
+    }
+
+    > a {
         text-decoration: none;
         font-size: 0.7em;
         text-align: center;
-        padding: 1em 1em 0;
+        padding: 0 1em;
         font-weight: bold;
         word-wrap: break-word;
+        .text-ellipsis();
+        .line-clamp(2);
     }
 
     &:hover {
@@ -634,6 +656,7 @@ td > a > .state-badges {
     color: @icinga-blue;
     margin: 0;
     font-size: 1.2em;
+    max-width: 10em;
     text-decoration: none;
     padding-left: 2em;
     line-height: 2.5em;
@@ -737,6 +760,22 @@ td > a > .state-badges {
     text-decoration: underline;
 }
 
+.text {
+    display: block;
+    .text-ellipsis();
+}
+
+.breadcrumb li a {
+    .process-title {
+        margin-top: -2.5em;
+        margin-left: 1.2em;
+    }
+
+    .text {
+        white-space: nowrap;
+    }
+}
+
 #layout.twocols, #layout.layout-minimal, div.compact {
     .breadcrumb {
         font-size: 0.833em;
@@ -745,6 +784,18 @@ td > a > .state-badges {
 
 /** END of breadcrumb **/
 
+.tiles .process-node {
+    justify-content: space-between;
+}
+
+.tiles .monitored-node {
+    padding-bottom: 1.5em;
+
+    > a {
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+}
 
 ul.error, ul.warning {
     padding: 0;