From b5e21ceeaff4f425979b5723b6bd013fd223550f Mon Sep 17 00:00:00 2001
From: madrix01 <shlokcpatel2001@gmail.com>
Date: Thu, 2 Jun 2022 22:18:35 +0530
Subject: [PATCH] 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       | 5 +++++
 static/templates/recent_topic_row.hbs | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/static/styles/recent_topics.css b/static/styles/recent_topics.css
index 8b62a4c018..ee5aab467f 100644
--- a/static/styles/recent_topics.css
+++ b/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;
diff --git a/static/templates/recent_topic_row.hbs b/static/templates/recent_topic_row.hbs
index b9926c6a61..a7a6676ced 100644
--- a/static/templates/recent_topic_row.hbs
+++ b/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}}