PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Obliterate some flexboxes in the room list

Browse source 
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:
Travis Ralston 2020-07-22 16:34:33 -06:00
parent c22cb6c325
commit 80687e358f
3 changed files with 2 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
res/css/structures/_LeftPanel.scss
View file

@ -135,12 +135,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
} }
.mx_LeftPanel_roomListWrapper { .mx_LeftPanel_roomListWrapper {
// Create a flexbox to ensure the containing items cause appropriate overflow.
display: flex;
flex-grow: 1;
overflow: hidden; overflow: hidden;
min-height: 0;
margin-top: 10px; // so we're not up against the search/filter margin-top: 10px; // so we're not up against the search/filter
&.mx_LeftPanel_roomListWrapper_stickyBottom { &.mx_LeftPanel_roomListWrapper_stickyBottom {
@ -153,14 +148,8 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
} }
.mx_LeftPanel_actualRoomListContainer { .mx_LeftPanel_actualRoomListContainer {
flex-grow: 1; // fill the available space
overflow-y: auto;
width: 100%;
max-width: 100%;
position: relative; // for sticky headers position: relative; // for sticky headers
height: 100%; // ensure scrolling still works
// Create a flexbox to trick the layout engine
display: flex;
} }
} }

8
res/css/views/rooms/_RoomList.scss
View file

@ -15,11 +15,5 @@ limitations under the License.
*/ */
.mx_RoomList { .mx_RoomList {
width: calc(100% - 16px); // 16px of artificial right-side margin (8px is overflowed from the sublists) padding-right: 7px; // width of the scrollbar, to line things up
// Create a column-based flexbox for the sublists. That's pretty much all we have to
// worry about in this stylesheet.
display: flex;
flex-direction: column;
flex-wrap: nowrap; // let the column overflow
} }

7
res/css/views/rooms/_RoomSublist.scss
View file

@ -15,15 +15,8 @@ limitations under the License.
*/ */
.mx_RoomSublist { .mx_RoomSublist {
// The sublist is a column of rows, essentially
display: flex;
flex-direction: column;
margin-left: 8px; margin-left: 8px;
margin-bottom: 4px; margin-bottom: 4px;
width: 100%;
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
.mx_RoomSublist_headerContainer { .mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy // Create a flexbox to make alignment easy