git.diff

diff --git a/client/components/user-status.html b/client/components/user-status.html
index 75c1c7722..eb37eefca 100644
--- a/client/components/user-status.html
+++ b/client/components/user-status.html
@@ -29,6 +29,35 @@ component.exports = {
     newCompose: function() {
       return this.get('entitlements').includes('use_new_compose');
     },
+    numVisible: function() {
+      var numVisible = 0;
+      var totalAvatarsWidth = 0;
+      var users = this.get('users');
+      var availableWidth = this.get('availableSpace');
+
+      // account for padding on either end
+      availableWidth -= 32;
+      // Determine how many avatars will be visible, based on # initials
+      users.forEach((user) => {
+        var length = initials(user.full_name).length;
+        // 18 = width of 1-wide initial box, 11 = width taken up by extra initial
+        // 1 initial: 18px wide; 2 initials: 29px wide; 3: 40px; etc.
+        totalAvatarsWidth += (19 + ((length - 1) * 11));
+        if (totalAvatarsWidth < availableWidth) {
+          numVisible += 1;
+        }
+      });
+      // Don't show "+1"
+      if (numVisible + 1 === users.length) {
+        numVisible -= 1;
+      }
+      // Don't show just one avatar
+      if (numVisible === 1) {
+        numVisible = 0;
+      }
+
+      return numVisible;
+    },
     hiddenNames: function() {
       var users = this.get('users');
       var numVisible = this.get('numVisible');
@@ -36,16 +65,6 @@ component.exports = {
     }
   },
   oninit: function() {
-    this.observe('availableSpace', (width) => {
-      if (width) {
-        this.setNumVisible(width);
-      }
-    });
-    this.observe('users', () => {
-      if (this.get('availableSpace')) {
-        this.setNumVisible(this.get('availableSpace'));
-      }
-    });
     if (this.get('newCompose')) {
       this.listenTo(window, 'resize', debounce(() => this.resize(), 50));
     }
@@ -55,34 +74,6 @@ component.exports = {
       this.resize();
     }
   },
-  setNumVisible: function(availableWidth) {
-    var numVisible = 0;
-    var totalAvatarsWidth = 0;
-    var users = this.get('users');
-
-    // account for padding on either end
-    availableWidth -= 32;
-    // Determine how many avatars will be visible, based on # initials
-    users.forEach((user) => {
-      var length = initials(user.full_name).length;
-      // 18 = width of 1-wide initial box, 11 = width taken up by extra initial
-      // 1 initial: 18px wide; 2 initials: 29px wide; 3: 40px; etc.
-      totalAvatarsWidth += (19 + ((length - 1) * 11));
-      if (totalAvatarsWidth < availableWidth) {
-        numVisible += 1;
-      }
-    });
-    // Don't show "+1"
-    if (numVisible + 1 === users.length) {
-      numVisible -= 1;
-    }
-    // Don't show just one avatar
-    if (numVisible === 1) {
-      numVisible = 0;
-    }
-
-    this.set('numVisible', numVisible);
-  },
   resize: function() {
     const NAV_PADDING = 32;
     const PUBLISHING_STATUS_WIDTH = 76;