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.

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);

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;

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;
       }