UX: Display category and tags on full page search in a seperate row.

app/assets/javascripts/discourse/templates/full-page-search.hbs

@@ -60,16 +60,20 @@
 
   {{#each model.posts as |result|}}
     <div class='fps-result'>
-        <div class='author'>
-            {{avatar result imageSize="large"}}
-        </div>
+      <div class='author'>
+        {{avatar result imageSize="large"}}
+      </div>
+
+      <div class='fps-topic'>
         <div class='topic'>
           {{#if bulkSelectEnabled}}
             {{track-selected selectedList=selected selectedId=result.topic}}
           {{/if}}
+
           <a class='search-link' href='{{unbound result.url}}'>
             {{topic-status topic=result.topic disableActions=true}}<span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
           </a>
+
           <div class='search-category'>
             {{category-link result.topic.category}}
             {{#each result.topic.tags as |tag|}}
@@ -78,26 +82,30 @@
             {{plugin-outlet "full-page-search-category"}}
           </div>
         </div>
+
         <div class='blurb container'>
           <span class='date'>
-          {{format-age result.created_at}}
-          {{#if result.blurb}}
-          -
-          {{/if}}
+            {{format-age result.created_at}}
+            {{#if result.blurb}}
+            -
+            {{/if}}
           </span>
+
           {{#if result.blurb}}
             {{#highlight-text highlight=q}}
               {{{unbound result.blurb}}}
             {{/highlight-text}}
           {{/if}}
         </div>
+
         {{#if showLikeCount}}
-        {{#if result.like_count}}
-        <span class='like-count'>
-          {{result.like_count}} <i class="icon fa fa-heart"></i>
-        </span>
-        {{/if}}
+          {{#if result.like_count}}
+            <span class='like-count'>
+              {{result.like_count}} <i class="icon fa fa-heart"></i>
+            </span>
+          {{/if}}
         {{/if}}
+      </div>
     </div>
   {{/each}}
 

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

@@ -1,7 +1,8 @@
 .fps-result {
 
   .author {
-    float: left;
+    display: inline-block;
+    vertical-align: top;
   }
 
   .like-count {
@@ -14,7 +15,6 @@
   }
 
   .search-category {
-    float:right;
     padding-top:3px;
   }
 
@@ -46,7 +46,6 @@
   .blurb {
     font-size: 1.0em;
     line-height: 20px;
-    margin-left: 60px;
     word-wrap: break-word;
     max-width: 640px;
     color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
@@ -64,6 +63,10 @@
   }
 }
 
+.fps-topic {
+  display: inline-block;
+}
+
 .fps-select {
   margin-top: -15px;
   margin-bottom: 15px;

app/assets/stylesheets/mobile/search.scss

@@ -14,3 +14,7 @@
 .fps-search-context {
   margin-bottom: 15px;
 }
+
+.fps-topic {
+  max-width: 75%;
+}