style(ontology): crop loooong ontology labels (DEV-493) (#723)

dasch-swiss · May 4, 2022 · 1b7384f · 1b7384f
1 parent 8457119
commit 1b7384f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git 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
@@ -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;