scrollbars and resize handles around room sub lists

res/css/views/rooms/_RoomList.scss

@@ -16,8 +16,11 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    padding-bottom: 12px;
-    min-height: 400px;
+    /* take up remaining space below TopLeftMenu */
+    flex: 1;
+    /* use flexbox to layout sublists */
+    display: flex;
+    flex-direction: column;
 }
 
 .mx_RoomList_expandButton {
@@ -27,18 +30,6 @@ limitations under the License.
     padding-right: 12px;
 }
 
-/* Evil hacky override until Chrome fixes drop and drag table cells
-   and we can correctly fix horizontal wrapping in the sidebar again */
-.mx_RoomList_scrollbar .gm-scroll-view {
-    overflow-x: hidden ! important;
-    overflow-y: scroll ! important;
-}
-
-/* Make sure the scrollbar is above the sticky headers from RoomList */
-.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
-    z-index: 6;
-}
-
 .mx_RoomList_emptySubListTip_container {
     background-color: $secondary-accent-color;
     padding-left: 18px;
@@ -65,3 +56,9 @@ limitations under the License.
     position: absolute;
     right: 60px;
 }
+
+.mx_RoomList_itemsSubList {
+    min-height: 80px;
+    flex: 1;
+}
+

src/components/views/rooms/RoomList.js

@@ -34,6 +34,8 @@ import TagOrderStore from '../../../stores/TagOrderStore';
 import RoomListStore from '../../../stores/RoomListStore';
 import GroupStore from '../../../stores/GroupStore';
 
+import ResizeHandle from '../elements/ResizeHandle';
+import {Resizer, CollapseDistributor} from '../../../resizer'
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 
@@ -518,11 +520,29 @@ module.exports = React.createClass({
                 showEmpty: showEmpty,
                 incomingCall: self.state.incomingCall,
             };
-            return subListsProps.map((props) => {
+            return subListsProps.reduce((components, props, i) => {
+                props = Object.assign({}, defaultProps, props);
+                const isLast = i === subListsProps.length - 1;
+                const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
+                if (!len) {
+                    return components;  //dont render
+                }
                 const {key, label, ... otherProps} = props;
                 const chosenKey = key || label;
-                return <RoomSubList key={chosenKey} label={label} {...otherProps} />;
-            });
+
+                let subList = <GeminiScrollbarWrapper style={{flexGrow: len}} className={"mx_RoomList_itemsSubList"} key={chosenKey}>
+                                { <RoomSubList label={label} {...otherProps} /> }
+                            </GeminiScrollbarWrapper>;
+
+                if (!isLast) {
+                    return components.concat(
+                        subList,
+                        <ResizeHandle key={chosenKey+"-resizer"} vertical={true} />
+                    );
+                } else {
+                    return components.concat(subList);
+                }
+            }, []);
         }
 
         let subLists = [
@@ -612,12 +632,9 @@ module.exports = React.createClass({
         const subListComponents = mapProps(subLists);
 
         return (
-            <GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
-                autoshow={true} onScroll={self._whenScrolling} onResize={self._whenScrolling} wrappedRef={this._collectGemini}>
             <div className="mx_RoomList">
                 { subListComponents }
             </div>
-            </GeminiScrollbarWrapper>
         );
     },
 });