use AutoHideScrollbar in RoomSubList

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";

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 {

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;

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;

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;

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 {