Improve layout of history events.

frontend/src/app/features/content/pages/content/content-event.component.html

@@ -4,7 +4,7 @@
     </div>
     <div class="col ps-2 event-right">
         <div class="event-message">
-            <span class="event-actor user-ref me-1">{{event.actor | sqxUserNameRef:null}}</span> 
+            <span class="event-actor user-ref me-1" [title]="event.actor | sqxUserNameRef:null">{{event.actor | sqxUserNameRef:null}}</span> 
             <span [innerHTML]="event | sqxHistoryMessage"></span>
         </div>
 

frontend/src/app/features/content/pages/content/content-event.component.scss

@@ -3,11 +3,11 @@
 
 :host ::ng-deep {
     .user-ref {
-        font-weight: 500;
+        @include text-variable;
     }
 
     .marker-ref {
-        font-weight: 500;
+        @include text-variable;
     }
 }
 
@@ -29,10 +29,6 @@ a {
     &-right {
         overflow: hidden;
     }
-
-    &-message {
-        overflow-wrap: break-word;
-    }
 }
 
 .user-picture {

frontend/src/app/shared/components/assets/asset-history.component.html

@@ -5,7 +5,7 @@
         </div>
         <div class="col ps-2">
             <div class="event-message">
-                <span class="event-actor user-ref me-1">{{assetEvent.event.actor | sqxUserNameRef:null}}</span> 
+                <span class="event-actor user-ref me-1" [title]="assetEvent.event.actor | sqxUserNameRef:null">{{assetEvent.event.actor | sqxUserNameRef:null}}</span> 
                 <span [innerHTML]="assetEvent.event | sqxHistoryMessage"></span>
             </div>
     

frontend/src/app/shared/components/assets/asset-history.component.scss

@@ -3,11 +3,11 @@
 
 :host ::ng-deep {
     .user-ref {
-        font-weight: 500;
+        @include text-variable;
     }
 
     .marker-ref {
-        font-weight: 500;
+        @include text-variable;
     }
 }
 

frontend/src/app/shared/components/comments/comment.component.html

@@ -7,7 +7,7 @@
         <div class="col col-text">
             <div class="comment-message">
                 <div class="user-row">
-                    <div class="user-ref">{{comment.user | sqxUserNameRef}}</div>
+                    <div class="user-ref" [title]="comment.user | sqxUserNameRef:null">{{comment.user | sqxUserNameRef:null}}</div>
                 </div>
     
                 <div [innerHTML]="comment.text | sqxMarkdown | sqxSafeHtml"></div>

frontend/src/app/shared/components/comments/comment.component.scss

@@ -12,8 +12,12 @@
     width: auto;
 }
 
+.marker-ref {
+    @include text-variable;
+}
+
 .user-ref {
-    font-weight: bold;
+    @include text-variable;
 }
 
 .user-picture {

frontend/src/app/shared/components/history/history-list.component.html

@@ -5,7 +5,7 @@
         </div>
         <div class="col ps-2 event-right">
             <div class="event-message">
-                <span class="user-ref">{{event.actor | sqxUserNameRef}}</span>
+                <span class="user-ref" [title]="event.actor | sqxUserNameRef:null">{{event.actor | sqxUserNameRef:null}}</span>
                 <span [innerHTML]="event | sqxHistoryMessage"></span>
             </div>
             <div class="event-created">{{event.created | sqxFromNow}}</div>

frontend/src/app/shared/components/history/history-list.component.scss

@@ -11,11 +11,11 @@
 
 :host ::ng-deep {
     .user-ref {
-        font-weight: 500;
+        @include text-variable;
     }
 
     .marker-ref {
-        font-weight: 500;
+        @include text-variable;
     }
 }
 
@@ -35,8 +35,4 @@
     &-right {
         overflow: hidden;
     }
-
-    &-message {
-        overflow-wrap: break-word;
-    }
 }

frontend/src/app/shared/components/schema-category.component.ts

@@ -9,7 +9,7 @@ import { CdkDragDrop, CdkDragStart } from '@angular/cdk/drag-drop';
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { LocalStoreService, SchemaCategory, SchemaDto, SchemasState } from '@app/shared/internal';
 
-const ITEM_HEIGHT = 2.5;
+const ITEM_HEIGHT = 2.25;
 
 @Component({
     selector: 'sqx-schema-category[schemaCategory]',

frontend/src/app/theme/_mixins.scss

@@ -216,6 +216,15 @@
     width: auto;
 }
 
+@mixin text-variable {
+    @include truncate-nowidth;
+    display: inline-block;
+    font-size: inherit;
+    font-weight: 500;
+    max-width: 150px;
+    vertical-align: top;
+}
+
 @mixin no-drag {
     -webkit-user-drag: none;
 }

frontend/src/app/theme/_panels2.scss

@@ -267,6 +267,10 @@
     margin-left: -.5rem;
     margin-right: -.5rem;
 
+    .nav-item {
+        height: 2.25rem;
+    }
+
     .nav-item {
         max-width: 100%;
     }
@@ -278,7 +282,6 @@
         cursor: pointer;
         font-size: inherit;
         font-weight: 500;
-        margin-bottom: .125rem;
         padding-left: 1rem;
         padding-right: 1rem;
         transition: background-color .4s ease-in, color .4s ease-in;