Fix too long name in menu

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index aa5bfa9c9b42e8e0310dca68452a260034c04491..1e532ec13b0786c6bad275c4affaaacc921afd12 100644 (file)
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,8 +5,8 @@
         <my-avatar-notification [user]="user"></my-avatar-notification>
 
         <div class="logged-in-info">
-          <a routerLink="/my-account/settings" class="logged-in-username">{{ user.account?.displayName }}</a>
-          <div class="logged-in-email">{{ user.username }}</div>
+          <a routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
+          <div class="logged-in-username">{{ user.username }}</div>
         </div>
 
         <div class="logged-in-more" ngbDropdown placement="bottom-right">

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index f30b8941391b76446aa31b7fe8902e1ccb0e92f4..69704674aa5a9a9a90c1787417f86eb5da250631 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -41,8 +41,11 @@ menu {
 
     .logged-in-info {
       flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
-      .logged-in-username {
+      .logged-in-display-name {
         font-size: 16px;
         font-weight: $font-semibold;
         color: var(--menuForegroundColor);
@@ -51,7 +54,7 @@ menu {
         @include disable-default-a-behaviour;
       }
 
-      .logged-in-email {
+      .logged-in-username {
         font-size: 13px;
         color: #C6C6C6;
         white-space: nowrap;