From 3a9fea4409099019daf0cdc86f1d3b226a204beb Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Sat, 5 Jan 2019 23:09:44 +0800
Subject: [PATCH] align and truncate header tags and participants

---
 .../stylesheets/common/base/header.scss       | 81 ++++++++++++-------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 3fd1d6fc225..598b319b4cc 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -259,7 +259,6 @@
     margin-right: 8px;
     &.bullet {
       padding-top: 2px; // alignment hack
-      line-height: 18px;
     }
   }
   .badge-wrapper.bullet {
@@ -287,55 +286,81 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      height: 20px;
       .discourse-tag {
-        display: block;
-        float: left;
-        line-height: 18px;
-        margin: 2px 4px 0 0;
+        display: inline; // tags need to stay inline in order for them to truncate
       }
     }
   }
-  // if a topic has both categories and tags, the tag container should shrink
-  // instead of wrapping to the next line.
-  .categories-wrapper + .topic-header-extra {
-    min-width: 0;
+  // the tag container should shrink
+  .topic-header-extra {
+    min-width: 1px; // 1px value is needed to avoid IE11 flexbox bug
   }
 }
 
-.topic-header-participants {
-  height: 20px;
+// PM header participants
 
-  > span {
-    margin: 0 2px;
-    display: block;
-    float: left;
-    height: 20px;
+$avatar-height: 1.641em;
+$mobile-avatar-height: 1.532em;
+
+.topic-header-participants {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  font-size: $font-down-1;
+  margin-left: 5px;
+
+  .trigger-user-card,
+  .trigger-group-card {
+    &:not(:last-of-type) {
+      margin-right: 5px;
+    }
+  }
+
+  .trigger-user-card {
+    .icon {
+      height: $avatar-height;
+      .mobile-view & {
+        height: $mobile-avatar-height;
+      }
+      display: inline-block;
+      img {
+        height: 100%;
+        width: auto;
+      }
+    }
   }
 
   .trigger-group-card {
-    display: block;
-    float: left;
-    margin: 0 4px;
-    padding: 1px 4px;
+    padding: 0 5px;
     border: 1px solid $primary-low;
     border-radius: 0.25em;
-    align-items: center;
-    height: 16px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 
-    a {
+    .icon {
+      display: flex;
+      align-items: center;
+      height: $avatar-height;
+      .mobile-view & {
+        height: $mobile-avatar-height;
+      }
       color: $primary-high;
 
       .d-icon {
-        margin: 1px 4px 0 0;
+        margin-right: 5px;
       }
     }
+
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   .more-participants {
-    display: inline-block;
     color: $header_primary-high;
-    line-height: 20px;
-    padding: 0 4px;
+    margin-left: 5px;
   }
 }