Improve layering for chat

Currently we have a lot of unnecessary layers being created in the app,
which is extremely problematic on Windows when using Chrome, as it
deoptimises fonts rendering due to layers mismatch; chrome's algorithm
can't figure out if the layers won't resize or overlap so it creates a
lot of additional layers, which has a side effect of turning off
sub-pixel antialiasing on Windows.
This is a first step to improve the layering in the entire app.

Author: Dariusz Niemczyk

res/css/structures/_LeftPanel.scss

@@ -26,6 +26,8 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel_wrapper {
     display: flex;
     max-width: 50%;
+    // Contain the amount of layers rendered by constraining what actually needs re-layering via css
+    contain: layout paint;
 
     .mx_LeftPanel_wrapper--user {
         background-color: $roomlist-bg-color;

res/css/structures/_RoomView.scss

@@ -20,6 +20,8 @@ limitations under the License.
     flex: 1;
     position: relative;
     justify-content: center;
+    // Contain the amount of layers rendered by constraining what actually needs re-layering via css
+    contain: strict;
 }
 
 .mx_RoomView {
@@ -163,7 +165,6 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
-    contain: content;
 }
 
 .mx_RoomView_statusArea {

res/css/structures/_ScrollPanel.scss

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_ScrollPanel {
+    contain: strict;
 
     .mx_RoomView_MessageList {
         position: relative;