recent_topics: Prevent topic name from extending into unread column.

Previously, when there were no unread messages in a topic, the topic
name was allowed to expand into the space allocated to the unread
count. This matched the behavior of the left sidebar. However, the
left sidebar has extremely limited horizontal space, and being able to
display a few extra characters is useful; recent topics does not have
this constraint. Further, recent topics wraps long topic names on
overflow, which looks ugly when using use the unread count's space.

So we switch to having the unread count element consume space even
when there is no count, using `visiblity:hidden`.

Fixes a part of #19449

static/styles/recent_topics.css

@@ -142,9 +142,14 @@
 
         .unread_count {
             margin-right: 10px;
+            margin-left: 10px;
             align-self: center;
         }
 
+        .unread_hidden {
+            visibility: hidden;
+        }
+
         .flex_container {
             display: flex;
             align-items: center;

static/templates/recent_topic_row.hbs

@@ -13,7 +13,7 @@
                 <a href="{{topic_url}}">{{topic}}</a>
             </div>
             <div class="right_part">
-                {{#if unread_count}}<span class="unread_count">{{unread_count}}</span>{{/if}}
+                <span class="unread_count {{#unless unread_count}}unread_hidden{{/unless}}">{{unread_count}}</span>
                 <div class="recent_topic_actions">
                     <div class="recent_topics_focusable hidden-for-spectators">
                         {{#if topic_muted}}