Properly sepearate left column from timeline

res/css/_components.scss

@@ -17,6 +17,7 @@
 @import "./structures/_LeftPanelWidget.scss";
 @import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
+@import "./structures/_BackdropPanel.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NonUrgentToastContainer.scss";
 @import "./structures/_NotificationPanel.scss";

res/css/structures/_BackdropPanel.scss

@@ -0,0 +1,33 @@
+/*
+Copyright 2021 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BackdropPanel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+}
+
+.mx_BackdropPanel--canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+}

res/css/structures/_LeftPanel.scss

@@ -20,7 +20,6 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel {
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
     min-width: 206px;
-    max-width: 50%;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;

res/css/structures/_MatrixChat.scss

@@ -29,22 +29,10 @@ limitations under the License.
 .mx_MatrixChat_wrapper {
     display: flex;
 
-    flex-direction: column;
-
     width: 100%;
     height: 100%;
 }
 
-.mx_BackdropPanel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-height: 100%;
-    z-index: 0;
-    pointer-events: none;
-    overflow: hidden;
-}
-
 .mx_MatrixToolbar {
     order: 1;
 
@@ -57,10 +45,10 @@ limitations under the License.
 
     display: flex;
 
-    order: 2;
-
     flex: 1;
+    flex-grow: 0;
     min-height: 0;
+    max-width: 50%;
 }
 
 .mx_MatrixChat_syncError {

res/css/structures/_RoomView.scss

@@ -18,6 +18,8 @@ limitations under the License.
     word-wrap: break-word;
     display: flex;
     flex-direction: column;
+    flex: 1;
+    position: relative;
 }
 
 

src/components/structures/BackdropPanel.tsx

@@ -131,10 +131,10 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
 
     public render() {
         if (!this.props.backgroundImage) return null;
-        return <div>
+        return <div className="mx_BackdropPanel">
             <canvas
                 ref={this.spacesCanvasRef}
-                className="mx_BackdropPanel"
+                className="mx_BackdropPanel--canvas"
                 style={{
                     opacity: .19,
                 }}
@@ -145,7 +145,7 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
                     opacity: .12,
                 }}
                 ref={this.roomListCanvasRef}
-                className="mx_BackdropPanel"
+                className="mx_BackdropPanel--canvas"
             />
         </div>;
     }

src/components/structures/LoggedInView.tsx

@@ -644,8 +644,8 @@ class LoggedInView extends React.Component<IProps, IState> {
                             resizeNotifier={this.props.resizeNotifier}
                         />
                         <ResizeHandle />
-                        { pageElement }
                     </div>
+                    { pageElement }
                 </div>
                 <CallContainer />
                 <NonUrgentToastContainer />