UX: puts tags and categories on same line in search-menu-results (#7830)

app/assets/javascripts/discourse/widgets/search-menu-results.js.es6

@@ -148,24 +148,27 @@ createSearchResult({
   builder(result, term) {
     const topic = result.topic;
 
-    const linkContent = [
-      h("div.header", [
+    const firstLine = [
       this.attach("topic-status", { topic, disableActions: true }),
       h("span.topic-title", new Highlighted(topic.fancyTitle, term))
-      ]),
+    ];
+
+    const secondLine = [
       this.attach("category-link", {
         category: topic.category,
         link: false
       })
     ];
-
     if (Discourse.SiteSettings.tagging_enabled) {
-      linkContent.push(
+      secondLine.push(
         this.attach("discourse-tags", { topic, tagName: "span" })
       );
     }
 
-    const link = h("span.topic", linkContent);
+    const link = h("span.topic", [
+      h("div.first-line", firstLine),
+      h("div.second-line", secondLine)
+    ]);
 
     return postResult.call(this, result, link, term);
   }

app/assets/stylesheets/common/base/search-menu.scss

@@ -253,6 +253,17 @@
     .topic {
       display: inline-block;
       line-height: $line-height-medium;
+
+      .second-line {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        .discourse-tags {
+          flex-wrap: wrap;
+          display: contents;
+        }
+      }
     }
 
     .topic-title {