FIX: Preventing presence users from overflowing window

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 ~}}

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>

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;
     }