Obliterate some flexboxes in the room list
We don't need columns of divs to equally size themselves, so use easier layout techniques to make the list fit in the container. We have to take a hit with `height:100%`, but the hit is much more insignificant than confusing the layout engine. The layout engine has a hard time with dynamically-but-statically-sized stuff like `width: 100%; display: flex;`, particularly when it is nested so badly. Overall this should improve performance for the app by not having to re-paint so often. Fixes https://github.com/vector-im/riot-web/issues/14639
This commit is contained in:
@@ -135,12 +135,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
}
|
||||
|
||||
.mx_LeftPanel_roomListWrapper {
|
||||
// Create a flexbox to ensure the containing items cause appropriate overflow.
|
||||
display: flex;
|
||||
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
margin-top: 10px; // so we're not up against the search/filter
|
||||
|
||||
&.mx_LeftPanel_roomListWrapper_stickyBottom {
|
||||
@@ -153,14 +148,8 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
}
|
||||
|
||||
.mx_LeftPanel_actualRoomListContainer {
|
||||
flex-grow: 1; // fill the available space
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative; // for sticky headers
|
||||
|
||||
// Create a flexbox to trick the layout engine
|
||||
display: flex;
|
||||
height: 100%; // ensure scrolling still works
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user