UX: Long category names pushed badges to a new line in the hamburger

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 {

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

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. */
 

app/assets/stylesheets/mobile/menu-panel.scss

@@ -0,0 +1,7 @@
+.menu-panel {
+  span.badge-category {
+    max-width: 85px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}