fix for broken UI when too many users are online in a topic

src/widgets/group-subs.jsx

@@ -1,6 +1,9 @@
-/* GroupSubs: a list of group subscribers currently online */
-
+// GroupSubs: a list of group subscribers currently online.
+// Show in the topic title bar
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { MAX_ONLINE_IN_TOPIC } from '../config.js'
 
 import LetterTile from './letter-tile.jsx';
 import { makeImageUrl } from '../lib/blob-helpers.js';
@@ -12,7 +15,10 @@ export default class GroupSubs extends React.Component {
 
   render() {
     const usersOnline = [];
-    (this.props.subscribers || []).map((sub) => {
+    const totalCount = (this.props.subscribers || []).length;
+    const countToShow = Math.min(MAX_ONLINE_IN_TOPIC, totalCount);
+
+    (this.props.subscribers || []).some((sub) => {
       usersOnline.push(
         <div className="avatar-box" key={sub.user}>
           <LetterTile
@@ -21,9 +27,17 @@ export default class GroupSubs extends React.Component {
             title={sub.public ? sub.public.fn : null} />
         </div>
       );
+      return usersOnline.length == countToShow;
     });
+
     return (
-      <div id="topic-users">{usersOnline}</div>
+      <div id="topic-users">{usersOnline} {totalCount > countToShow ?
+        <span>
+          <FormattedMessage id="more_online_members" defaultMessage="+{overflow} more"
+              description="Shown in MessagesView title bar when the number of online subscribers exceeds MAX_ONLINE_IN_TOPIC"
+              values={{ overflow: (totalCount - countToShow) }} />
+        </span> : null}
+      </div>
     );
   }
 };