From c60182cdb22d02b4e9215443c8ad45c69fd7fc3c Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 10 Feb 2020 13:48:47 -0500
Subject: [PATCH] UX: Prevent new badge from being orphaned on mobile

---
 .../templates/mobile/list/topic-list-item.raw.hbs     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.raw.hbs b/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.raw.hbs
index baef9931645..727c8382d89 100644
--- a/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.raw.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.raw.hbs
@@ -7,6 +7,13 @@
     {{else}}
       <div>
         {{/unless~}}
+        {{!--
+          The `~` syntax strip spaces between the elements, making it produce
+          `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
+          with no space between them.
+          This causes the topic-post-badge to be considered the same word as "text"
+          at the end of the link, preventing it from line wrapping onto its own line.
+        --}}
         <div class='main-link'>
           {{~raw-plugin-outlet name="topic-list-before-status"}}
           {{~raw "topic-status" topic=topic~}}
@@ -15,7 +22,7 @@
           {{~topic-featured-link topic~}}
           {{~/if~}}
           {{~#if topic.unseen~}}
-          &nbsp;<span class="badge-notification new-topic"></span>
+            <span class="topic-post-badges">&nbsp;<span class="badge-notification new-topic"></span></span>
           {{~/if~}}
           {{~#if expandPinned~}}
           {{~raw "list/topic-excerpt" topic=topic~}}
@@ -41,4 +48,4 @@
           <div class="clearfix"></div>
         </div>
       </div>
-</td>
\ No newline at end of file
+</td>