Improve PM participant list

app/assets/javascripts/discourse/widgets/private-message-map.js.es6

@@ -65,14 +65,14 @@ createWidget("pm-map-user", {
 
   html(attrs) {
     const user = attrs.user;
-    const avatar = avatarFor("small", {
+    const avatar = avatarFor("tiny", {
       template: user.avatar_template,
       username: user.username
     });
     const link = h("a", { attributes: { href: user.get("path") } }, [
       avatar,
       " ",
-      user.username
+      h("span", user.username)
     ]);
     const result = [link];
     const isCurrentUser = attrs.canRemoveSelfId === user.get("id");
@@ -123,7 +123,7 @@ export default createWidget("private-message-map", {
         " ",
         I18n.t("private_message_info.title")
       ]),
-      h("div.participants.clearfix", participants)
+      h("div.participants", participants)
     ];
 
     if (attrs.canInvite) {

app/assets/stylesheets/common/base/topic-post.scss

@@ -292,7 +292,7 @@ aside.quote {
 
   h3 {
     margin-bottom: 4px;
-    color: dark-light-choose($primary-high, $secondary-low);
+    color: $primary;
     line-height: $line-height-large;
     font-weight: normal;
     font-size: $font-0;
@@ -324,6 +324,59 @@ aside.quote {
       margin: 1px 5px 2px 0;
     }
   }
+
+  .participants {
+    // PMs
+    box-sizing: border-box;
+    margin: 0 -10px;
+    margin-bottom: 0.5em;
+    display: flex; // IE11
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    @supports (display: grid) {
+      // Overrides flex fallback above
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      @include breakpoint(tablet, min-width) {
+        grid-template-columns: repeat(5, 1fr);
+      }
+      @include breakpoint(mobile) {
+        grid-template-columns: repeat(2, 1fr);
+        font-size: $font-down-1;
+      }
+      @include breakpoint(mobile-small) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+
+    .user {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 0 0 auto; // IE11
+      a {
+        color: $primary-high;
+        &[href] {
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          min-width: 0;
+        }
+        span {
+          flex: 1 1 auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+    .d-icon-times {
+      margin-left: 0.25em;
+      color: dark-light-choose($primary-medium, $secondary-high);
+    }
+  }
 }
 
 .topic-avatar,

app/assets/stylesheets/desktop/topic-post.scss

@@ -382,21 +382,6 @@ nav.post-controls {
     padding: 7px 10px 15px 10px;
     color: $primary;
   }
-  .participants {
-    // PMs //
-    .user {
-      float: left;
-      margin: 7px 20px 7px 0;
-    }
-    .user a {
-      color: dark-light-choose($primary-high, $secondary-low);
-      font-weight: bold;
-      font-size: $font-down-1;
-    }
-    .d-icon-times {
-      color: dark-light-choose($primary-medium, $secondary-high);
-    }
-  }
   .buttons {
     float: right;
     .btn {

app/assets/stylesheets/mobile/topic-post.scss

@@ -212,13 +212,6 @@ a.reply-to-tab {
       margin: 0 0 10px 0;
     }
   }
-  .participants {
-    // PMs //
-    .user {
-      float: left;
-      margin: 0 10px 10px 0;
-    }
-  }
   .buttons {
     .btn {
       border: 0;