From 9b8e8bc36366463ac70b4f4f1f844eb2840fbecd Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Sun, 26 Jun 2022 16:22:26 +0200
Subject: [PATCH] Improve layout of history events.

---
 .../content/pages/content/content-event.component.html   | 2 +-
 .../content/pages/content/content-event.component.scss   | 8 ++------
 .../components/assets/asset-history.component.html       | 2 +-
 .../components/assets/asset-history.component.scss       | 4 ++--
 .../shared/components/comments/comment.component.html    | 2 +-
 .../shared/components/comments/comment.component.scss    | 6 +++++-
 .../components/history/history-list.component.html       | 2 +-
 .../components/history/history-list.component.scss       | 8 ++------
 .../app/shared/components/schema-category.component.ts   | 2 +-
 frontend/src/app/theme/_mixins.scss                      | 9 +++++++++
 frontend/src/app/theme/_panels2.scss                     | 5 ++++-
 11 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/features/content/pages/content/content-event.component.html b/frontend/src/app/features/content/pages/content/content-event.component.html
index 056590745..5c58a7ed2 100644
--- a/frontend/src/app/features/content/pages/content/content-event.component.html
+++ b/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>
 
diff --git a/frontend/src/app/features/content/pages/content/content-event.component.scss b/frontend/src/app/features/content/pages/content/content-event.component.scss
index 490fb5b7c..8a5821901 100644
--- a/frontend/src/app/features/content/pages/content/content-event.component.scss
+++ b/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 {
diff --git a/frontend/src/app/shared/components/assets/asset-history.component.html b/frontend/src/app/shared/components/assets/asset-history.component.html
index f5c96dfb7..f0b59be17 100644
--- a/frontend/src/app/shared/components/assets/asset-history.component.html
+++ b/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>
     
diff --git a/frontend/src/app/shared/components/assets/asset-history.component.scss b/frontend/src/app/shared/components/assets/asset-history.component.scss
index 230da5547..2b1188479 100644
--- a/frontend/src/app/shared/components/assets/asset-history.component.scss
+++ b/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;
     }
 }
 
diff --git a/frontend/src/app/shared/components/comments/comment.component.html b/frontend/src/app/shared/components/comments/comment.component.html
index d8da95b5a..56f16ad21 100644
--- a/frontend/src/app/shared/components/comments/comment.component.html
+++ b/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>
diff --git a/frontend/src/app/shared/components/comments/comment.component.scss b/frontend/src/app/shared/components/comments/comment.component.scss
index 44a7f54ee..6e161e784 100644
--- a/frontend/src/app/shared/components/comments/comment.component.scss
+++ b/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 {
diff --git a/frontend/src/app/shared/components/history/history-list.component.html b/frontend/src/app/shared/components/history/history-list.component.html
index 88e813f5d..588d63efa 100644
--- a/frontend/src/app/shared/components/history/history-list.component.html
+++ b/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>
diff --git a/frontend/src/app/shared/components/history/history-list.component.scss b/frontend/src/app/shared/components/history/history-list.component.scss
index 904792912..d61c69f5d 100644
--- a/frontend/src/app/shared/components/history/history-list.component.scss
+++ b/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;
-    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/schema-category.component.ts b/frontend/src/app/shared/components/schema-category.component.ts
index d922c2a41..8063e9364 100644
--- a/frontend/src/app/shared/components/schema-category.component.ts
+++ b/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]',
diff --git a/frontend/src/app/theme/_mixins.scss b/frontend/src/app/theme/_mixins.scss
index 3f496c479..fdc138534 100644
--- a/frontend/src/app/theme/_mixins.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/frontend/src/app/theme/_panels2.scss b/frontend/src/app/theme/_panels2.scss
index bff9a1516..2a66f0526 100644
--- a/frontend/src/app/theme/_panels2.scss
+++ b/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;