Fix sidebar category overflow

src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js

@@ -40,8 +40,8 @@ class CategoryItem extends React.Component {
           </div>
 
           <div className="category__info" onClick={() => this.handleSelect()}>
-            <span>{this.props.category.name}</span>
+            <span className="category__name">{this.props.category.name}</span>
-            <span className="badge">{this.props.category.unread}</span>
+            <span className="badge category__badge">{this.props.category.unread}</span>
           </div>
         </div>
 

src/newsreader/scss/components/category/_category.scss

@@ -14,16 +14,18 @@
     overflow: hidden;
     white-space: nowrap;
 
-    & h4 {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
 
     &:hover {
       cursor: pointer;
     }
   }
 
+  &__name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &__menu {
     display: flex;
     align-items: center;