From c5af2dbfb4eeea8671bc8f22215b13a5d89e949e Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 21 Jan 2020 11:58:54 +0300
Subject: [PATCH] truncate overflowing user name

---
 webapp/assets/_new/styles/tokens.scss       |  1 -
 webapp/components/UserTeaser/UserTeaser.vue | 15 +++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index a6f0a8a70..90ec527ea 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -315,7 +315,6 @@ $z-index-dropdown: 8888;
 $z-index-page-submenu: 2500;
 $z-index-page-header: 2000;
 $z-index-page-sidebar: 1500;
-$z-index-hc-post-card-link: 5;
 $z-index-sticky: 100;
 $z-index-post-card-link: 5;
 
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index 0b90c11ae..3cab9a240 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -148,15 +148,25 @@ export default {
 </script>
 
 <style lang="scss">
+.trigger {
+  max-width: 100%;
+}
+
 .user-teaser {
   display: flex;
   flex-wrap: nowrap;
   z-index: $z-index-post-card-link;
   position: relative;
 
+  > .user-avatar {
+    flex-shrink: 0;
+  }
+
   > .user-info {
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
 
     > .ds-text {
       display: flex;
@@ -164,9 +174,10 @@ export default {
     }
 
     > .user-slug {
-      white-space: nowrap;
-      text-overflow: ellipsis;
       margin: 0 0 $space-xxx-small $space-xx-small;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
   .username {