From ec428e56ae0570a2253b43cf6557174cec05555a Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Thu, 24 Jun 2021 14:34:53 +0200
Subject: [PATCH] fix: messages - ellipsis for header's name

---
 src/styles/chat/_index.scss | 41 ++++++++++++++++++++++++++++++++++---
 src/views/page-messages.pug |  2 +-
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/styles/chat/_index.scss b/src/styles/chat/_index.scss
index f3a202a..373240a 100644
--- a/src/styles/chat/_index.scss
+++ b/src/styles/chat/_index.scss
@@ -1,7 +1,42 @@
-.chat-view {
-  height: calc(100vh - 50px - 78px);
+#messages {
+  
+  .chat-view {
+    height: calc(100vh - 50px - 78px);
+  }
 
   @media (max-width: 768px) {
-    height: calc(100vh - 50px - 68px);
+
+    height: calc(100vh - 50px - 58px);
+
+    .messages-header {
+      display: flex;
+    }
+
+    solid-set-default[name="segment2"] {
+      font-size: 14px;
+      line-height: 16px;
+      width: 75%;
+    }
+
+    orbit-user-avatar {
+      height: 31px;
+      width: 31px;
+    }
+
+    solid-display-value[name="name"] {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 210px;
+    }
+
+    solid-display-value[name="hyphen"] {
+        display: none;
+    }
+
+    solid-link {
+      vertical-align: super;
+    }
   }
 }
diff --git a/src/views/page-messages.pug b/src/views/page-messages.pug
index a3b2e46..d89d442 100644
--- a/src/views/page-messages.pug
+++ b/src/views/page-messages.pug
@@ -1,4 +1,4 @@
-div.segment.full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal.bg-color-white
+div.segment.full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xxsmall.border-bottom.border-color-grey.whitespace-normal.bg-color-white.message-header
   solid-display.labelled-avatar.small(
     bind-resources
     fields='segment1(account.picture), segment2(name, hyphen, at, username)'