From af58049eeb49bff40404eb3321f545019cb40525 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 1 Jul 2019 13:11:43 +0200
Subject: [PATCH] UX: puts tags and categories on same line in
 search-menu-results (#7830)

---
 .../widgets/search-menu-results.js.es6        | 19 +++++++++++--------
 .../stylesheets/common/base/search-menu.scss  | 11 +++++++++++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/search-menu-results.js.es6 b/app/assets/javascripts/discourse/widgets/search-menu-results.js.es6
index 026f150de18..83439e9232e 100644
--- a/app/assets/javascripts/discourse/widgets/search-menu-results.js.es6
+++ b/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", [
-        this.attach("topic-status", { topic, disableActions: true }),
-        h("span.topic-title", new Highlighted(topic.fancyTitle, term))
-      ]),
+    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);
   }
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index e29cacaf32b..170142a6dc4 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/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 {