Fix flex values after blur changes

res/css/structures/_LeftPanel.scss

@@ -24,6 +24,11 @@ $roomListCollapsedWidth: 68px;
     }
 }
 
+.mx_LeftPanel_wrapper {
+    display: flex;
+    max-width: 50%;
+}
+
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel

res/css/structures/_MatrixChat.scss

@@ -33,6 +33,7 @@ limitations under the License.
     height: 100%;
 }
 
+
 .mx_MatrixToolbar {
     order: 1;
 
@@ -47,9 +48,7 @@ limitations under the License.
     display: flex;
 
     flex: 1;
-    flex-grow: 0;
     min-height: 0;
-    max-width: 50%;
 }
 
 .mx_MatrixChat_syncError {
@@ -65,7 +64,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
     background-color: $primary-bg-color;
 
     flex: 1 1 0;

src/components/structures/LoggedInView.tsx

@@ -644,7 +644,8 @@ class LoggedInView extends React.Component<IProps, IState> {
                     aria-hidden={this.props.hideToSRUsers}
                 >
                     <ToastContainer />
-                    <div ref={this._resizeContainer} className={bodyClasses}>
+                    <div className={bodyClasses}>
+                        <div ref={this._resizeContainer} className='mx_LeftPanel_wrapper'>
                             <BackdropPanel
                                 backgroundImage={this.state.backgroundImage}
                             />
@@ -657,6 +658,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                         </div>
                         { pageElement }
                     </div>
+                </div>
                 <CallContainer />
                 <NonUrgentToastContainer />
                 <HostSignupContainer />