UX: fix number cutoff in header chat indicator (#21946)

In the chat header indicator, expand to a pill when the number reaches
N digits, and also display 99+ if the number is over 99.

plugins/chat/assets/javascripts/discourse/components/chat-header-icon-unread-indicator.hbs

@@ -1,9 +1,7 @@
 {{#if this.showUrgentIndicator}}
   <div class="chat-channel-unread-indicator urgent">
-    <div class="number-wrap">
-      <div
-        class="number"
-      >{{this.chatTrackingStateManager.allChannelUrgentCount}}</div>
+    <div class="chat-channel-unread-indicator__number">
+      {{this.unreadCountLabel}}
     </div>
   </div>
 {{else if this.showUnreadIndicator}}

plugins/chat/assets/javascripts/discourse/components/chat-header-icon-unread-indicator.js

@@ -41,4 +41,10 @@ export default class ChatHeaderIconUnreadIndicator extends Component {
 
     return preferences.includes(this.indicatorPreference);
   }
+
+  get unreadCountLabel() {
+    return this.chatTrackingStateManager.allChannelUrgentCount > 99
+      ? "99+"
+      : this.chatTrackingStateManager.allChannelUrgentCount;
+  }
 }

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -114,11 +114,28 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
 .header-dropdown-toggle.chat-header-icon {
   .icon {
     .chat-channel-unread-indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: auto;
+      min-width: 14px;
+      padding: 3px;
+      border-radius: 1em;
       border: 2px solid var(--header_background);
       position: absolute;
-      right: 2px;
+      right: 0;
       bottom: 2px;
       transition: border-color linear 0.15s;
+
+      &__number {
+        font-size: 0.7rem;
+        line-height: 15px;
+        height: inherit;
+
+        &.-too-high {
+          font-size: 1.25rem;
+        }
+      }
     }
   }