Merge pull request #2523 from ORCID/lmendpza/9803-truncate-extremely-long-user-names-in-the-global-header

9803-truncate-extremely-long-user-names-in-the-global-header

Author: cryptalith

src/app/layout/header/header.component.scss

@@ -191,3 +191,7 @@ nav {
     }
   }
 }
+
+app-search {
+  overflow: hidden;
+}

src/app/layout/search/search.component.scss

@@ -128,3 +128,7 @@
 button {
   border: none;
 }
+
+app-user-menu {
+  overflow: hidden;
+}

src/app/layout/user-menu/user-menu.component.html

@@ -11,9 +11,9 @@
     id="cy-user-info"
   >
     <img src="./assets/vectors/profile-icon.svg" alt="" />
-    <ng-container *ngIf="platform.columns12" class="name-container">{{
+    <span *ngIf="platform.columns12" class="name-text-container">{{
       displayName
-    }}</ng-container>
+    }}</span>
 
     <mat-icon *ngIf="platform.columns12">expand_more</mat-icon>
   </button>

src/app/layout/user-menu/user-menu.component.scss

@@ -36,6 +36,7 @@
 
 :host {
   .user-menu-button {
+    max-width: 100%;
     padding: 0 32px;
     .columns-4 & {
       padding: 0;
@@ -65,3 +66,10 @@
     margin-right: 12px;
   }
 }
+
+span.name-text-container {
+  overflow: hidden;
+  width: calc(100% - 59px);
+  display: inline-block;
+  text-overflow: ellipsis;
+}