From b040e11c6b146e1e13e14d7525c35a5e91cf311e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 19 Jan 2018 19:15:08 -0500
Subject: [PATCH] FIX: Preventing presence users from overflowing window

---
 .../components/composer-presence-display.hbs  |  9 +++---
 .../components/topic-presence-display.hbs     |  9 +++---
 .../assets/stylesheets/presence.scss          | 30 ++++++++++++++++---
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/plugins/discourse-presence/assets/javascripts/discourse/templates/components/composer-presence-display.hbs b/plugins/discourse-presence/assets/javascripts/discourse/templates/components/composer-presence-display.hbs
index bc5d6876f33..97936135d0f 100644
--- a/plugins/discourse-presence/assets/javascripts/discourse/templates/components/composer-presence-display.hbs
+++ b/plugins/discourse-presence/assets/javascripts/discourse/templates/components/composer-presence-display.hbs
@@ -1,9 +1,10 @@
 {{#if shouldDisplay}}
   <div class="presence-users">
-    {{#each users as |user|}}
-      {{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}}
-    {{/each}}
-
+    <div class="presence-avatars">
+      {{#each users as |user|}}
+        {{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}}
+      {{/each}}
+    </div>
     <span class="presence-text">
       <span class="description">
         {{#if isReply ~}}
diff --git a/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs b/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs
index a459527ff4f..636ba39a268 100644
--- a/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs
+++ b/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs
@@ -1,9 +1,10 @@
 {{#if shouldDisplay}}
   <div class="presence-users">
-    {{#each users as |user|}}
-      {{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}}
-    {{/each}}
-
+    <div class="presence-avatars">
+      {{#each users as |user|}}
+        {{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}}
+      {{/each}}
+    </div>
     <span class="presence-text">
       <span class="description">{{i18n 'presence.replying_to_topic' count=users.length}}</span>{{!-- (using comment to stop whitespace)
   --}}<span class="wave"><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></span>
diff --git a/plugins/discourse-presence/assets/stylesheets/presence.scss b/plugins/discourse-presence/assets/stylesheets/presence.scss
index bd4612817f7..3fc25f06a5b 100644
--- a/plugins/discourse-presence/assets/stylesheets/presence.scss
+++ b/plugins/discourse-presence/assets/stylesheets/presence.scss
@@ -1,15 +1,24 @@
 .presence-users {
   background-color: $secondary;
   color: $primary-medium;
-  padding: 0px 5px;
   display: flex;
-  align-items: center;
   
   span.presence-text {
     margin-left: 5px;
+    margin-right: 2px;
+    flex: 0 0 auto;
+    padding-top: 3px;    
+  }
+
+  .presence-avatars {
+    display: flex;
+    overflow: hidden;
+    flex-wrap: wrap;    
   }
 
   .wave {
+    flex: 0 0 auto;
+    
     .dot {
       display: inline-block;
       animation: wave 1.8s linear infinite;
@@ -38,13 +47,26 @@
 .composer-fields .presence-users {
   position: absolute;
   top: 18px;
-  right: 35px;
+  right: 40px;
+  @media screen and (max-width: $small-width) {
+    max-width: 318px;    
+    .presence-avatars {
+      flex-wrap: nowrap;
+    }
+  }
 }
 
 .mobile-view {
+  .presence-users {
+    font-size: $font-down-1;
+  }
   .composer-fields .presence-users {
     top: 3px;
-    right: 54px;
+    right: 65px;
+    max-width: 70px;
+    .presence-avatars {
+      flex-wrap: nowrap;
+    }
     .description {
       display:none;
     }