UX: Fix search topic titles wrapping (#13315)

UX: Fix search topic titles wrapping (#13315)

A followup to e3b0abc and a replacement PR for #13298. Fixes long topic titles wrapping to a separate line in the dropdown search results.

Also replaces divs that were incorrectly nested inside spans.

diff --git a/app/assets/javascripts/discourse/app/widgets/search-menu-results.js b/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
index 57b89ef..a40eae2 100644
--- a/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
+++ b/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
@@ -161,9 +161,7 @@ createSearchResult({
         this.siteSettings.use_pg_headlines_for_excerpt &&
           result.topic_title_headline
           ? new RawHtml({
-              html: `<span>${emojiUnescape(
-                result.topic_title_headline
-              )}</span>`,
+              html: emojiUnescape(result.topic_title_headline),
             })
           : new Highlighted(topic.fancyTitle, term)
       ),
@@ -182,8 +180,8 @@ createSearchResult({
     }
 
     const link = h("span.topic", [
-      h("div.first-line", firstLine),
-      h("div.second-line", secondLine),
+      h("span.first-line", firstLine),
+      h("span.second-line", secondLine),
     ]);
 
     return postResult.call(this, result, link, term);
diff --git a/app/assets/javascripts/discourse/app/widgets/topic-status.js b/app/assets/javascripts/discourse/app/widgets/topic-status.js
index 9a1b460..7ffc097 100644
--- a/app/assets/javascripts/discourse/app/widgets/topic-status.js
+++ b/app/assets/javascripts/discourse/app/widgets/topic-status.js
@@ -6,7 +6,7 @@ import { h } from "virtual-dom";
 import { iconNode } from "discourse-common/lib/icon-library";
 
 export default createWidget("topic-status", {
-  tagName: "div.topic-statuses",
+  tagName: "span.topic-statuses",
 
   html(attrs) {
     const topic = attrs.topic;
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index 6598f18..8833184 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -71,6 +71,11 @@
     }
 
     .search-result-topic {
+      .first-line {
+        display: block;
+        line-height: $line-height-medium;
+      }
+
       .second-line {
         display: flex;
         flex-wrap: wrap;
@@ -273,14 +278,12 @@
     }
 
     .topic {
-      display: inline-block;
+      display: block;
     }
 
     .topic-title {
-      display: inline-block;
       color: var(--tertiary);
       overflow-wrap: anywhere;
-      line-height: $line-height-medium;
       @supports not (overflow-wrap: anywhere) {
         word-break: break-word;
       }

GitHub sha: 1cd189aa

This commit appears in #13315 which was approved by awesomerobot. It was merged by CvX.