From 44bebf255dbf123f092b06ff43fe0bdb8d54ed99 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Tue, 23 Jul 2013 15:04:52 -0400
Subject: [PATCH] Fix layout of category badges on categories page and in
 combobox

---
 .../javascripts/discourse/views/category_chooser_view.js    | 6 +++---
 app/assets/stylesheets/application/combobox.css.scss        | 4 ++++
 app/assets/stylesheets/application/topic-list.css.scss      | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/views/category_chooser_view.js b/app/assets/javascripts/discourse/views/category_chooser_view.js
index d9ab5462c8b..83ef194b0a0 100644
--- a/app/assets/javascripts/discourse/views/category_chooser_view.js
+++ b/app/assets/javascripts/discourse/views/category_chooser_view.js
@@ -27,10 +27,10 @@ Discourse.CategoryChooserView = Discourse.ComboboxView.extend({
   template: function(text, templateData) {
     if (!templateData.color) return text;
 
-    var result = "<span class='badge-category' style='background-color: #" + templateData.color + '; color: #' +
-        templateData.text_color + ";'>" + templateData.name + "</span>";
+    var result = "<div class='badge-category' style='background-color: #" + templateData.color + '; color: #' +
+        templateData.text_color + ";'>" + templateData.name + "</div>";
 
-    result += " <span class='topic-count'>&times; " + templateData.topic_count + "</span>";
+    result += " <div class='topic-count'>&times; " + templateData.topic_count + "</div>";
 
     var description = templateData.description_text;
     // TODO wtf how can this be null?
diff --git a/app/assets/stylesheets/application/combobox.css.scss b/app/assets/stylesheets/application/combobox.css.scss
index 3676af5c531..6acb3d1dfb9 100644
--- a/app/assets/stylesheets/application/combobox.css.scss
+++ b/app/assets/stylesheets/application/combobox.css.scss
@@ -1,7 +1,11 @@
 .category-combobox {
+  .badge-category {
+    display: inline-block;
+  }
   .topic-count {
     font-size: 11px;
     color: #666;
+    display: inline-block;
   }
   .highlighted .topic-count {
     color: white;
diff --git a/app/assets/stylesheets/application/topic-list.css.scss b/app/assets/stylesheets/application/topic-list.css.scss
index d7615fdb4a1..87a5e7b5cce 100644
--- a/app/assets/stylesheets/application/topic-list.css.scss
+++ b/app/assets/stylesheets/application/topic-list.css.scss
@@ -221,7 +221,7 @@
   }
   .badge-category {
     float: left;
-    margin: 3px 4px 0 0;
+    margin: 1px 4px 0 0;
   }
   .posters {
     float: left;