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.

res/css/structures/_RoomView.scss

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

res/css/structures/_ScrollPanel.scss

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