Simplify rendering to css-only

res/css/structures/_LeftPanel.scss

@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-:root {
-    --room-list-collapsed-width: 68px;
-}
+$roomListCollapsedWidth: 68px;
 
 .mx_MatrixChat--with-avatar {
     .mx_LeftPanel,
@@ -34,6 +32,10 @@ limitations under the License.
         display: flex;
         overflow: hidden;
         position: relative;
+
+        &[data-collapsed] {
+            max-width: $roomListCollapsedWidth;
+        }
     }
 }
 
@@ -208,7 +210,7 @@ limitations under the License.
         width: unset !important;
 
         .mx_LeftPanel_roomListContainer {
-            width: var(--room-list-collapsed-width);
+            width: $roomListCollapsedWidth;
 
             .mx_LeftPanel_userHeader {
                 flex-direction: row;

src/components/structures/LoggedInView.tsx

@@ -686,10 +686,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                             <div
                                 className="mx_LeftPanel_wrapper--user"
                                 ref={this._resizeContainer}
-                                style={{
-                                    maxWidth: this.props.collapseLhs ? getComputedStyle(document.documentElement)
-                                        .getPropertyValue('--room-list-collapsed-width') : undefined,
-                                }}
+                                data-collapsed={this.props.collapseLhs ? true : undefined}
                             >
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}