From 3e02f247c82e6a02687784f9cfe7ab44d4530977 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 1 Nov 2018 16:34:12 +0100
Subject: [PATCH] use AutoHideScrollbar in RoomSubList

---
 res/css/_components.scss                   |  1 +
 res/css/structures/_RoomSubList.scss       | 17 ++++++++++++-----
 res/css/structures/_TopLeftMenuButton.scss |  2 +-
 res/css/views/rooms/_RoomList.scss         |  2 +-
 res/css/views/rooms/_RoomTile.scss         |  2 +-
 src/components/structures/RoomSubList.js   | 11 +++++------
 6 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 128e7235ad..a230842c77 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -1,5 +1,6 @@
 // autogenerated by rethemendex.sh
 @import "./_common.scss";
+@import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 3321433d47..e062a912a5 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -16,14 +16,12 @@ limitations under the License.
 
 .mx_RoomSubList {
     min-height: 31px;
-    flex: 0 0 auto;
+    flex: 0 1 auto;
     display: flex;
     flex-direction: column;
 }
 
 .mx_RoomSubList_nonEmpty {
-    min-height: 80px;
-    flex: 1;
     margin-bottom: 8px;
 }
 
@@ -131,9 +129,18 @@ limitations under the License.
     transform: rotateZ(-90deg);
 }
 
-.mx_RoomSubList .gm-scrollbar-container {
+.mx_RoomSubList_scroll {
     /* let rooms list grab all available space */
-    flex: 1;
+    flex: 0 1 auto;
+    padding: 0 15px !important;
+}
+/*
+for browsers that don't support overlay scrollbars,
+subtract scrollbar width from right padding on hover when overflowing
+so the content doesn't jump when showing the scrollbars
+*/
+body.mx_scrollbar_nooverlay .mx_RoomSubList_scroll.mx_AutoHideScrollbar_overflow:hover {
+    padding-right: calc(15px - var(--scrollbar-width)) !important;
 }
 
 .collapsed {
diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
index a80e06c620..43a1e27ee4 100644
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ b/res/css/structures/_TopLeftMenuButton.scss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_TopLeftMenuButton {
-    height: 52px;
+    flex: 0 0 52px;
     border-bottom: 1px solid $panel-divider-color;
     color: $topleftmenu-color;
     background-color: $primary-bg-color;
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index e2557d4b3a..77185452cf 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_RoomList {
     /* take up remaining space below TopLeftMenu */
-    flex: 1;
+    flex: 1 1 auto;
     /* use flexbox to layout sublists */
     display: flex;
     flex-direction: column;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 78dbc27da3..ca23d79137 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -20,7 +20,7 @@ limitations under the License.
     align-items: center;
     cursor: pointer;
     height: 40px;
-    margin: 0 12px;
+    margin: 0;
     padding: 2px 12px;
     position: relative;
     background-color: $secondary-accent-color;
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 490a84bb7f..3ea819e088 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -23,6 +23,7 @@ import dis from '../../dispatcher';
 import Unread from '../../Unread';
 import * as RoomNotifs from '../../RoomNotifs';
 import * as FormattingUtils from '../../utils/FormattingUtils';
+import AutoHideScrollbar from './AutoHideScrollbar';
 import { KeyCode } from '../../Keyboard';
 import { Group } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
@@ -348,19 +349,17 @@ const RoomSubList = React.createClass({
                     {this._getHeaderJsx()}
                 </div>;
             } else {
-                const heightEstimation = (len * 40) + 31 + (8 + 8);
+                const heightEstimation = (len * 44) + 31 + (8 + 8);
                 const style = {
-                    flexGrow: `${heightEstimation}`,
                     maxHeight: `${heightEstimation}px`,
                 };
-                const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
                 const tiles = this.makeRoomTiles();
                 tiles.push(...this.props.extraTiles);
-                return <div className={subListClasses} style={style}>
+                return <div style={style} className={subListClasses}>
                     {this._getHeaderJsx()}
-                    <GeminiScrollbarWrapper>
+                    <AutoHideScrollbar className="mx_RoomSubList_scroll">
                         { tiles }
-                    </GeminiScrollbarWrapper>
+                    </AutoHideScrollbar>
                 </div>;
             }
         } else {