From a93d5cde090ba0c144a3a33d2833b25b3f5faf9b Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 14:38:39 +0200
Subject: [PATCH] Simplify rendering to css-only

---
 res/css/structures/_LeftPanel.scss         | 10 ++++++----
 src/components/structures/LoggedInView.tsx |  5 +----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 47a4c20957..5603de18d8 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/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;
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 2ba188e1ff..bbe0e42a0a 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/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}