add wrapper we can then add padding to when sticking headers

res/css/structures/_LeftPanel2.scss

@@ -121,6 +121,14 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
             }
         }
 
+        .mx_LeftPanel2_roomListWrapper {
+            display: flex;
+            flex-grow: 1;
+            overflow: hidden;
+            min-height: 0;
+
+        }
+
         .mx_LeftPanel2_actualRoomListContainer {
             flex-grow: 1; // fill the available space
             overflow-y: auto;

src/components/structures/LeftPanel2.tsx

@@ -325,15 +325,17 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 <aside className="mx_LeftPanel2_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
-                    <div
+                    <div className="mx_LeftPanel2_roomListWrapper">
-                        className={roomListClasses}
+                        <div
-                        onScroll={this.onScroll}
+                            className={roomListClasses}
-                        ref={this.listContainerRef}
+                            onScroll={this.onScroll}
-                        // Firefox sometimes makes this element focusable due to
+                            ref={this.listContainerRef}
-                        // overflow:scroll;, so force it out of tab order.
+                            // Firefox sometimes makes this element focusable due to
-                        tabIndex={-1}
+                            // overflow:scroll;, so force it out of tab order.
-                    >
+                            tabIndex={-1}
-                        {roomList}
+                        >
+                            {roomList}
+                        </div>
                     </div>
                 </aside>
             </div>