diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index aa5bfa9c9..1e532ec13 100644
--- 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 f30b89413..69704674a 100644
--- 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;