From 992349944a911a686e2992aecf4ea0df772d5a42 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 2 Jul 2020 12:18:48 +0100
Subject: [PATCH 1/2] Fix room list 2's room tile wrapping wrongly

---
 res/css/views/rooms/_RoomTile2.scss | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss
index 44c5b6ee17..144a5ccf86 100644
--- a/res/css/views/rooms/_RoomTile2.scss
+++ b/res/css/views/rooms/_RoomTile2.scss
@@ -23,7 +23,6 @@ limitations under the License.
 
     // The tile is also a flexbox row itself
     display: flex;
-    flex-wrap: wrap;
 
     &.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen {
         background-color: $roomtile2-selected-bg-color;
@@ -43,7 +42,8 @@ limitations under the License.
 
     .mx_RoomTile2_nameContainer {
         flex-grow: 1;
-        max-width: calc(100% - 58px); // 32px avatar, 18px badge area, 8px margin on avatar
+        min-width: 0; // allow flex to shrink it
+        margin-right: 8px; // spacing to buttons/badges
 
         // Create a new column layout flexbox for the name parts
         display: flex;
@@ -81,8 +81,20 @@ limitations under the License.
         }
     }
 
+    //.mx_RoomTile2_badgeContainer,
+    .mx_RoomTile2_menuButton,
+    .mx_RoomTile2_notificationsButton {
+        width: 20px;
+        min-width: 20px; // yay flex
+        height: 20px;
+        margin: auto 0;
+    }
+
+    .mx_RoomTile2_menuButton {
+        margin-left: 4px; // spacing between buttons
+    }
+
     .mx_RoomTile2_badgeContainer {
-        width: 18px;
         height: 32px;
 
         // Create another flexbox row because it's super easy to position the badge at
@@ -90,14 +102,15 @@ limitations under the License.
         display: flex;
         align-items: center;
         justify-content: center;
+
+        .mx_NotificationBadge {
+            margin-right: 2px;
+        }
     }
 
     // The context menu buttons are hidden by default
     .mx_RoomTile2_menuButton,
     .mx_RoomTile2_notificationsButton {
-        width: 20px;
-        height: 20px;
-        margin: auto 0 auto 8px;
         position: relative;
         display: none;
 
@@ -130,7 +143,7 @@ limitations under the License.
             .mx_RoomTile2_badgeContainer {
                 width: 0;
                 height: 0;
-                visibility: hidden;
+                display: none;
             }
 
             .mx_RoomTile2_notificationsButton,

From c259408d71faab9b788174572b5a7bbf5f6e4d61 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 2 Jul 2020 12:35:06 +0100
Subject: [PATCH 2/2] fix alignment of dot and simplify CSS rules

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_RoomTile2.scss | 31 +++++++++++++----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss
index 144a5ccf86..6241b3d0ba 100644
--- a/res/css/views/rooms/_RoomTile2.scss
+++ b/res/css/views/rooms/_RoomTile2.scss
@@ -81,36 +81,33 @@ limitations under the License.
         }
     }
 
-    //.mx_RoomTile2_badgeContainer,
-    .mx_RoomTile2_menuButton,
-    .mx_RoomTile2_notificationsButton {
-        width: 20px;
-        min-width: 20px; // yay flex
-        height: 20px;
-        margin: auto 0;
-    }
-
     .mx_RoomTile2_menuButton {
         margin-left: 4px; // spacing between buttons
     }
 
     .mx_RoomTile2_badgeContainer {
-        height: 32px;
-
-        // Create another flexbox row because it's super easy to position the badge at
-        // the end this way.
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        height: 16px;
+        // don't set width so that it takes no space when there is no badge to show
+        margin: auto 0; // vertically align
 
         .mx_NotificationBadge {
-            margin-right: 2px;
+            margin-right: 2px; // centering
+        }
+
+        .mx_NotificationBadge_dot {
+            // make the smaller dot occupy the same width for centering
+            margin-left: 5px;
+            margin-right: 7px;
         }
     }
 
     // The context menu buttons are hidden by default
     .mx_RoomTile2_menuButton,
     .mx_RoomTile2_notificationsButton {
+        width: 20px;
+        min-width: 20px; // yay flex
+        height: 20px;
+        margin: auto 0;
         position: relative;
         display: none;