From 33edb1dea96b9eb3a41dac5f479cce75ee0a2122 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 20 Jul 2016 12:47:32 +0100
Subject: [PATCH 1/2] Made the badge always exist, but if no unread mesasges
 available then has a different class

---
 src/components/views/rooms/RoomTile.js | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index d3fbfa0220..e510c2abed 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -95,14 +95,24 @@ module.exports = React.createClass({
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
         var badge;
         var badgeContent;
-        if (this.props.highlight || notificationCount > 0) {
-            if (this.state.badgeHover) {
-                badgeContent = "\u00B7 \u00B7 \u00B7";
-            } else {
-                badgeContent = notificationCount ? notificationCount : '!';
-            }
-            badge = <div className="mx_RoomTile_badge" onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
+        var badgeClasses;
+
+        if (this.state.badgeHover) {
+            badgeContent = "\u00B7 \u00B7 \u00B7";
+        } else if (this.props.highlight || notificationCount > 0) {
+            badgeContent = notificationCount ? notificationCount : '!';
+        } else {
+            badgeContent = '\u200B';
         }
+
+        if (this.props.highlight || notificationCount > 0) {
+            badgeClasses = "mx_RoomTile_badge"
+        } else {
+            badgeClasses = "mx_RoomTile_badge mx_RoomTile_badge_no_unread";
+        }
+
+        badge = <div className={ badgeClasses } onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
+
         /*
         if (this.props.highlight) {
             badge = <div className="mx_RoomTile_badge">!</div>;

From ffa43ebb96039920805dff52e721775af343e14e Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Wed, 20 Jul 2016 17:12:41 +0100
Subject: [PATCH 2/2] badge content when hovered is now kerned via the CSS

---
 src/components/views/rooms/RoomTile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index e510c2abed..aa83110632 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -98,7 +98,7 @@ module.exports = React.createClass({
         var badgeClasses;
 
         if (this.state.badgeHover) {
-            badgeContent = "\u00B7 \u00B7 \u00B7";
+            badgeContent = "\u00B7\u00B7\u00B7";
         } else if (this.props.highlight || notificationCount > 0) {
             badgeContent = notificationCount ? notificationCount : '!';
         } else {
@@ -106,7 +106,7 @@ module.exports = React.createClass({
         }
 
         if (this.props.highlight || notificationCount > 0) {
-            badgeClasses = "mx_RoomTile_badge"
+            badgeClasses = "mx_RoomTile_badge";
         } else {
             badgeClasses = "mx_RoomTile_badge mx_RoomTile_badge_no_unread";
         }