From 1b7384fb5ca2c47cd68ff058877c9427484d74e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= <github@milchkannen.ch>
Date: Wed, 4 May 2022 10:34:48 +0200
Subject: [PATCH] style(ontology): crop loooong ontology labels (DEV-493)
 (#723)

---
 .../project/ontology/ontology.component.html    |  4 ++--
 .../project/ontology/ontology.component.scss    | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app/project/ontology/ontology.component.html b/src/app/project/ontology/ontology.component.html
index 4fa12ad98a..1fd8a8358d 100644
--- a/src/app/project/ontology/ontology.component.html
+++ b/src/app/project/ontology/ontology.component.html
@@ -58,8 +58,8 @@ <h2 class="mat-title">
         <mat-toolbar class="ontology-editor-header">
             <mat-toolbar-row>
                 <span class="ontology-info">
-                    <h3 class="mat-title space-reducer"
-                        [matTooltip]="ontology.comment ? ontology.comment : ontology.id"
+                    <h3 class="mat-title"
+                        [matTooltip]="ontology.label + (ontology.comment ? ' &mdash; ' + ontology.comment : '')"
                         matTooltipPosition="above">
                         {{ontology?.label}}
                     </h3>
diff --git a/src/app/project/ontology/ontology.component.scss b/src/app/project/ontology/ontology.component.scss
index 6059d064bb..c9fd68cf85 100644
--- a/src/app/project/ontology/ontology.component.scss
+++ b/src/app/project/ontology/ontology.component.scss
@@ -33,6 +33,23 @@ $width: 340px;
   .ontology-editor-header {
     z-index: 2;
     top: 121px;
+
+    .ontology-info {
+      width: calc(100% - 176px - 32px);
+
+      h3, p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      h3 {
+        margin-top: 6px;
+      }
+    }
     .mat-toolbar-row {
       padding-right: 0;