From 80687e358f7103c8c361db3cd11d36bf754f63c5 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 22 Jul 2020 16:34:33 -0600
Subject: [PATCH] Obliterate some flexboxes in the room list

We don't need columns of divs to equally size themselves, so use easier layout techniques to make the list fit in the container. We have to take a hit with `height:100%`, but the hit is much more insignificant than confusing the layout engine.

The layout engine has a hard time with dynamically-but-statically-sized stuff like `width: 100%; display: flex;`, particularly when it is nested so badly. Overall this should improve performance for the app by not having to re-paint so often.

Fixes https://github.com/vector-im/riot-web/issues/14639
---
 res/css/structures/_LeftPanel.scss    | 13 +------------
 res/css/views/rooms/_RoomList.scss    |  8 +-------
 res/css/views/rooms/_RoomSublist.scss |  7 -------
 3 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 1673092c9e..db531cf088 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -135,12 +135,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
         }
 
         .mx_LeftPanel_roomListWrapper {
-            // Create a flexbox to ensure the containing items cause appropriate overflow.
-            display: flex;
-
-            flex-grow: 1;
             overflow: hidden;
-            min-height: 0;
             margin-top: 10px; // so we're not up against the search/filter
 
             &.mx_LeftPanel_roomListWrapper_stickyBottom {
@@ -153,14 +148,8 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
         }
 
         .mx_LeftPanel_actualRoomListContainer {
-            flex-grow: 1; // fill the available space
-            overflow-y: auto;
-            width: 100%;
-            max-width: 100%;
             position: relative; // for sticky headers
-
-            // Create a flexbox to trick the layout engine
-            display: flex;
+            height: 100%; // ensure scrolling still works
         }
     }
 
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 690ed0646e..89ab85e146 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -15,11 +15,5 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists)
-
-    // Create a column-based flexbox for the sublists. That's pretty much all we have to
-    // worry about in this stylesheet.
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap; // let the column overflow
+    padding-right: 7px; // width of the scrollbar, to line things up
 }
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index 3ec4d114af..b907d06d36 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -15,15 +15,8 @@ limitations under the License.
 */
 
 .mx_RoomSublist {
-    // The sublist is a column of rows, essentially
-    display: flex;
-    flex-direction: column;
-
     margin-left: 8px;
     margin-bottom: 4px;
-    width: 100%;
-
-    flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
 
     .mx_RoomSublist_headerContainer {
         // Create a flexbox to make alignment easy