From be366bdd7f6fcbd28d13966dd1d86541c4bff140 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 10 Jun 2020 15:05:17 -0600
Subject: [PATCH] Fix various layout concerns with the new room list

It had ~32px of overflow causing a horizontal scrollbar. Turns out the layout engine gets confused when hidden elements are at the end of a flexbox, so we just move them higher in the DOM (where they logically still make sense).

The remaining changes are all alignment and misc changes in that respect, and probably not obvious.
---
 res/css/structures/_LeftPanel2.scss         |  5 +++++
 res/css/views/rooms/_NotificationBadge.scss |  2 --
 res/css/views/rooms/_RoomSublist2.scss      | 19 ++++++++++---------
 res/css/views/rooms/_RoomTile2.scss         |  4 +---
 src/components/views/rooms/RoomSublist2.tsx |  4 ++--
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss
index 65d23fc23a..bd2a3ba96e 100644
--- a/res/css/structures/_LeftPanel2.scss
+++ b/res/css/structures/_LeftPanel2.scss
@@ -131,6 +131,11 @@ $roomListMinimizedWidth: 50px;
         .mx_LeftPanel2_actualRoomListContainer {
             flex-grow: 1; // fill the available space
             overflow-y: auto;
+            width: 100%;
+            max-width: 100%;
+
+            // Create a flexbox to trick the layout engine
+            display: flex;
         }
     }
 }
diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss
index 500a7b7e05..9f9698bac5 100644
--- a/res/css/views/rooms/_NotificationBadge.scss
+++ b/res/css/views/rooms/_NotificationBadge.scss
@@ -28,7 +28,6 @@ limitations under the License.
 
     &.mx_NotificationBadge_visible {
         background-color: $roomtile2-badge-color;
-        margin-right: 14px;
 
         // Create a flexbox to order the count a bit easier
         display: flex;
@@ -46,7 +45,6 @@ limitations under the License.
             width: 6px;
             height: 6px;
             border-radius: 6px;
-            margin-right: 8px;
         }
 
         &.mx_NotificationBadge_2char {
diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 53a01088c9..2c34f28721 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -21,7 +21,7 @@ limitations under the License.
     display: flex;
     flex-direction: column;
 
-    padding-left: 8px;
+    margin-left: 8px;
     margin-top: 12px;
     margin-bottom: 12px;
     width: 100%;
@@ -30,16 +30,18 @@ limitations under the License.
         // Create a flexbox to make ordering easy
         display: flex;
         align-items: center;
+        padding-bottom: 8px;
+        height: 24px;
 
         .mx_RoomSublist2_badgeContainer {
             opacity: 0.8;
-            padding-right: 7px;
+            width: 16px;
+            margin-right: 5px; // aligns with the room tile's badge
 
-            // Create another flexbox row because it's super easy to position the badge at
-            // the end this way.
+            // Create another flexbox row because it's super easy to position the badge this way.
             display: flex;
             align-items: center;
-            justify-content: flex-end;
+            justify-content: center;
         }
 
         // Both of these buttons are hidden by default until the list is hovered
@@ -77,10 +79,9 @@ limitations under the License.
             opacity: 0.5;
             line-height: $font-16px;
             font-size: $font-12px;
-            padding-bottom: 8px;
 
-            width: 100%;
             flex: 1;
+            max-width: calc(100% - 16px); // 16px is the badge width
 
             // Ellipsize any text overflow
             text-overflow: ellipsis;
@@ -184,7 +185,7 @@ limitations under the License.
             &:not(.mx_RoomSublist2_headerContainer_withAux) {
                 // The menu button will be the rightmost button, so make it correctly aligned.
                 .mx_RoomSublist2_menuButton {
-                    margin-right: 16px;
+                    margin-right: 1px; // line it up with the badges on the room tiles
                 }
             }
 
@@ -218,7 +219,7 @@ limitations under the License.
             // Show the aux button, but not the list button
             width: 24px;
             height: 24px;
-            margin-right: 16px;
+            margin-right: 1px; // line it up with the badges on the room tiles
             visibility: visible;
         }
     }
diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss
index b1fd813655..67b1470550 100644
--- a/res/css/views/rooms/_RoomTile2.scss
+++ b/res/css/views/rooms/_RoomTile2.scss
@@ -18,9 +18,7 @@ limitations under the License.
 
 // Note: the room tile expects to be in a flexbox column container
 .mx_RoomTile2 {
-    width: calc(100% - 21px); // 10px for alignment/inset, 8px for padding on sides, 3px for margin
     margin-bottom: 4px;
-    margin-right: 3px;
     padding: 4px;
 
     // The tile is also a flexbox row itself
@@ -84,7 +82,7 @@ limitations under the License.
         // the end this way.
         display: flex;
         align-items: center;
-        justify-content: flex-end;
+        justify-content: center;
     }
 
     // The menu button is hidden by default
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 0df9c2ad73..12f3e96bac 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -237,11 +237,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                             >
                                 <span>{this.props.label}</span>
                             </AccessibleButton>
+                            {this.renderMenu()}
+                            {addRoomButton}
                             <div className="mx_RoomSublist2_badgeContainer">
                                 {badge}
                             </div>
-                            {this.renderMenu()}
-                            {addRoomButton}
                         </div>
                     );
                 }}