From 4266b0cf7d8d6eb66c7298010ee2246b5acac1e8 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 26 Jan 2024 12:11:03 -0500
Subject: [PATCH] UX: fix and improve topic title badge spacing (#25441)

---
 .../app/components/latest-topic-list-item.hbs          |  6 +++---
 .../discourse/app/components/topic-post-badges.hbs     | 10 ++++------
 .../app/raw-templates/list/topic-list-item.hbr         |  2 +-
 app/assets/stylesheets/common/components/badges.scss   |  3 +++
 app/assets/stylesheets/desktop/topic-list.scss         | 10 ----------
 5 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs b/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs
index 0f9caa75773..c47af49e327 100644
--- a/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs
+++ b/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs
@@ -14,9 +14,9 @@
     {{raw "topic-status" topic=this.topic}}
     {{topic-link this.topic}}
     {{~#if this.topic.featured_link}}
-      {{topic-featured-link this.topic}}
-    {{/if}}
-    <TopicPostBadges
+      &nbsp;{{topic-featured-link this.topic}}
+    {{/if}}{{! intentionally inline 
+    to avoid whitespace}}<TopicPostBadges
       @unreadPosts={{this.topic.unread_posts}}
       @unseen={{this.topic.unseen}}
       @url={{this.topic.lastUnreadUrl}}
diff --git a/app/assets/javascripts/discourse/app/components/topic-post-badges.hbs b/app/assets/javascripts/discourse/app/components/topic-post-badges.hbs
index 0a3bfb22184..c150834a756 100644
--- a/app/assets/javascripts/discourse/app/components/topic-post-badges.hbs
+++ b/app/assets/javascripts/discourse/app/components/topic-post-badges.hbs
@@ -1,14 +1,12 @@
-{{#if this.displayUnreadPosts}}
-  &nbsp;<a
+{{~#if this.displayUnreadPosts}}&nbsp;<a
     href={{this.url}}
     title={{i18n "topic.unread_posts" count=this.displayUnreadPosts}}
     class="badge badge-notification unread-posts"
   >{{this.displayUnreadPosts}}</a>
-{{/if}}
-{{#if this.unseen}}
-  &nbsp;<a
+{{/if~}}
+{{~#if this.unseen}}&nbsp;<a
     href={{this.url}}
     title={{i18n "topic.new"}}
     class="badge badge-notification new-topic"
   >{{this.newDotText}}</a>
-{{/if}}
\ No newline at end of file
+{{/if~}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr
index 37dc34ad124..c24e5be24f3 100644
--- a/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr
+++ b/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr
@@ -22,7 +22,7 @@
     {{~raw "topic-status" topic=topic}}
     {{~topic-link topic class="raw-link raw-topic-link"}}
     {{~#if topic.featured_link}}
-      {{~topic-featured-link topic}}
+      &nbsp;{{~topic-featured-link topic}}
     {{~/if}}
     {{~raw-plugin-outlet name="topic-list-after-title"}}
     {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 221c31e9d2d..bde8a2d1fb0 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -72,6 +72,8 @@
 
 .badge-notification {
   @extend %badge;
+  position: relative;
+  top: -2px;
   padding: 0.21em 0.42em;
   min-width: 0.5em;
   color: var(--secondary);
@@ -97,6 +99,7 @@
 
   &.new-topic {
     background-color: transparent;
+    padding-left: 0.15em;
   }
 
   &.new-topic::before {
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 12b9bf22ff6..f60cfde45ba 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -68,16 +68,6 @@
     }
   }
 
-  .badge-notification {
-    position: relative;
-    top: -2px;
-
-    &.new-topic {
-      top: -1px;
-      padding-left: 2px;
-    }
-  }
-
   $td-posters-height: 29px; // min-height of td with avatar glow
   $td-posters-more-lh: $td-posters-height - 4;