From 4a6f617f4da1e7301ef9980f465c4aaed11711ea Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 2 Sep 2015 15:42:20 -0400
Subject: [PATCH] UX: Long category names pushed badges to a new line in the
 hamburger

---
 app/assets/stylesheets/common/base/menu-panel.scss    |  8 ++++++++
 .../stylesheets/common/components/badges.css.scss     | 11 -----------
 app/assets/stylesheets/mobile.scss                    |  1 +
 app/assets/stylesheets/mobile/menu-panel.scss         |  7 +++++++
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 7ec8405613d..4151fdab160 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -67,6 +67,7 @@
       color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
       background-color: transparent;
       display: inline;
+      padding: 0;
     }
   }
 
@@ -76,6 +77,13 @@
     font-weight: normal;
     font-size: 11px;
   }
+
+  span.badge-category {
+    max-width: 90px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
 }
 
 .search-menu {
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index 47fb1a1cb6e..ed6dec22ebf 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -126,17 +126,6 @@
       }
     }
   }
-
-  span.badge-category {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .menu-panel & {
-      max-width: 90px;
-    }
-  }
-
 }
 
 // Category badge dropdown
diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss
index 91bf389d175..984da0c6683 100644
--- a/app/assets/stylesheets/mobile.scss
+++ b/app/assets/stylesheets/mobile.scss
@@ -18,6 +18,7 @@
 @import "mobile/user";
 @import "mobile/history";
 @import "mobile/directory";
+@import "mobile/menu-panel";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index e69de29bb2d..972ea30ab2a 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -0,0 +1,7 @@
+.menu-panel {
+  span.badge-category {
+    max-width: 85px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}