From 1e15c16f779e162476f664a00c233bd6b9e9b649 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 14 Nov 2018 11:01:50 -0500
Subject: [PATCH] UX: Condense layout when suggested and related messages are
 available

---
 .../javascripts/discourse/templates/topic.hbs | 15 ++++----
 app/assets/stylesheets/common/base/topic.scss | 38 +++++++++++++++++++
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index e71c671a0c6..402b20fa0b3 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -283,13 +283,14 @@
               {{/if}}
 
               {{plugin-outlet name="topic-above-suggested" args=(hash model=model)}}
-
-              {{#if model.relatedMessages.length}}
-                {{related-messages topic=model}}
-              {{/if}}
-              {{#if model.suggestedTopics.length}}
-                {{suggested-topics topic=model}}
-              {{/if}}
+              <div class="{{if model.relatedMessages.length 'related-messages-wrapper'}}{{if model.suggestedTopics.length 'suggested-topics-wrapper'}}">
+                {{#if model.relatedMessages.length}}
+                  {{related-messages topic=model}}
+                {{/if}}
+                {{#if model.suggestedTopics.length}}
+                  {{suggested-topics topic=model}}
+                {{/if}}
+              </div>
             {{/if}}
           {{/conditional-loading-spinner}}
 
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index b2e6a63eb8b..ae8dbbdb9cc 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -167,6 +167,44 @@ a.badge-category {
   max-width: 757px;
 }
 
+@include breakpoint(medium, min-width) {
+  .suggested-topics-wrapper.related-messages-wrapper {
+    display: flex;
+    width: 100%;
+    .suggested-topics,
+    .related-messages {
+      thead {
+        display: none;
+      }
+      .posts,
+      .age {
+        width: 45px;
+      }
+      .views {
+        display: none;
+      }
+      .posters {
+        width: 60px;
+        a {
+          display: none;
+          &:first-of-type,
+          &:last-of-type {
+            display: inline;
+          }
+        }
+      }
+    }
+    #suggested-topics {
+      order: 1;
+      margin-right: 1em;
+    }
+    #related-messages {
+      order: 2;
+      margin-left: 1em;
+    }
+  }
+}
+
 // Target the .badge-category text, the bullet icon needs to maintain `display: block`
 .suggested-topics h3 .badge-wrapper.bullet span.badge-category,
 .suggested-topics h3 .badge-wrapper.box span,