Add CSS containment rules for shorter reflow operations

res/css/_common.scss

@@ -291,6 +291,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_staticWrapper .mx_Dialog {
     z-index: 4010;
+    contain: content;
 }
 
 .mx_Dialog_background {

res/css/structures/_ContextualMenu.scss

@@ -38,6 +38,7 @@ limitations under the License.
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;
+    contain: content;
 }
 
 .mx_ContextualMenu_right {

res/css/structures/_LeftPanel.scss

@@ -25,6 +25,7 @@ $roomListCollapsedWidth: 68px;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
+    contain: content;
 
     .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
@@ -70,6 +71,7 @@ $roomListCollapsedWidth: 68px;
             // aligned correctly. This is also a row-based flexbox.
             display: flex;
             align-items: center;
+            contain: content;
 
             &.mx_IndicatorScrollbar_leftOverflow {
                 mask-image: linear-gradient(90deg, transparent, black 5%);

res/css/structures/_RightPanel.scss

@@ -25,6 +25,7 @@ limitations under the License.
     padding: 4px 0;
     box-sizing: border-box;
     height: 100%;
+    contain: strict;
 
     .mx_RoomView_MessageList {
         padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above

res/css/structures/_RoomView.scss

@@ -152,6 +152,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    contain: content;
 }
 
 .mx_RoomView_statusArea {
@@ -221,6 +222,7 @@ limitations under the License.
 
 .mx_RoomView_MessageList li {
     clear: both;
+    contain: content;
 }
 
 li.mx_RoomView_myReadMarker_container {

res/css/structures/_ScrollPanel.scss

@@ -21,5 +21,8 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
+
+        content-visibility: auto;
+        contain-intrinsic-size: 50px;
     }
 }

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_DecoratedRoomAvatar, .mx_ExtraTile {
     position: relative;
+    contain: content;
 
     &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
         mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');

res/css/views/rooms/_RoomSublist.scss

@@ -198,6 +198,7 @@ limitations under the License.
             // as the box model should be top aligned. Happens in both FF and Chromium
             display: flex;
             flex-direction: column;
+            align-self: stretch;
 
             mask-image: linear-gradient(0deg, transparent, black 4px);
         }

res/css/views/rooms/_RoomTile.scss

@@ -19,6 +19,10 @@ limitations under the License.
     margin-bottom: 4px;
     padding: 4px;
 
+    contain: strict;
+    height: 40px;
+    box-sizing: border-box;
+
     // The tile is also a flexbox row itself
     display: flex;