add wrapper we can then add padding to when sticking headers

This commit is contained in:
Bruno Windels 2020-07-08 14:49:04 +02:00
parent 7f757cd0f3
commit 75751abc60
2 changed files with 19 additions and 9 deletions

View file

@ -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 { .mx_LeftPanel2_actualRoomListContainer {
flex-grow: 1; // fill the available space flex-grow: 1; // fill the available space
overflow-y: auto; overflow-y: auto;

View file

@ -325,15 +325,17 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
<aside className="mx_LeftPanel2_roomListContainer"> <aside className="mx_LeftPanel2_roomListContainer">
{this.renderHeader()} {this.renderHeader()}
{this.renderSearchExplore()} {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> </div>
</aside> </aside>
</div> </div>