diff --git a/res/css/structures/_MainSplit.pcss b/res/css/structures/_MainSplit.pcss
index 35e4ea25c7..55e0dec103 100644
--- a/res/css/structures/_MainSplit.pcss
+++ b/res/css/structures/_MainSplit.pcss
@@ -29,7 +29,7 @@ limitations under the License.
     padding-left: calc(var(--container-gap-width) / 2);
     height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
 
-    &:hover .mx_ResizeHandle_horizontal::before {
+    &:hover .mx_ResizeHandle--horizontal::before {
         position: absolute;
         top: 50%;
         left: 50%;
diff --git a/res/css/structures/_MatrixChat.pcss b/res/css/structures/_MatrixChat.pcss
index 760527a7ff..c09d32f491 100644
--- a/res/css/structures/_MatrixChat.pcss
+++ b/res/css/structures/_MatrixChat.pcss
@@ -80,7 +80,7 @@ limitations under the License.
 /* negative margin greater than its positive padding. If it's the same */
 /* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
 /* https://github.com/vector-im/element-web/issues/19863 happens. */
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle--horizontal {
     margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
     /* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
     /* (IF there is NO margin on the leftPanel_wrapper) */
@@ -94,7 +94,7 @@ limitations under the License.
     /* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
 }
 
-.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
     position: relative;
 
     &::before {
diff --git a/res/css/views/elements/_ResizeHandle.pcss b/res/css/views/elements/_ResizeHandle.pcss
index 2af2880654..be913eec72 100644
--- a/res/css/views/elements/_ResizeHandle.pcss
+++ b/res/css/views/elements/_ResizeHandle.pcss
@@ -18,25 +18,24 @@ limitations under the License.
     cursor: row-resize;
     flex: 0 0 auto;
     z-index: 100;
-}
 
-.mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 -5px;
-    padding: 0 5px;
-    cursor: col-resize;
-}
+    &.mx_ResizeHandle--horizontal {
+        margin: 0 -5px;
+        padding: 0 5px;
+        cursor: col-resize;
 
-.mx_ResizeHandle.mx_ResizeHandle_vertical {
-    margin: -5px 0;
-    padding: 5px 0;
-    cursor: row-resize;
-}
+        > div {
+            width: 1px;
+            height: 100%;
+        }
+    }
 
-.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
-    width: 1px;
-    height: 100%;
-}
+    &.mx_ResizeHandle--vertical {
+        margin: -5px 0;
+        padding: 5px 0;
 
-.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
-    height: 1px;
+        > div {
+            height: 1px;
+        }
+    }
 }
diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss
index 7c9ae0b51a..c6e141497d 100644
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@@ -75,7 +75,7 @@ $MinWidth: 240px;
             background: $primary-content;
         }
 
-        .mx_ResizeHandle_horizontal::before {
+        .mx_ResizeHandle--horizontal::before {
             position: absolute;
             left: 3px;
             top: 50%;
@@ -140,7 +140,7 @@ $MinWidth: 240px;
         border-radius: 0 10px 10px 0;
     }
 
-    .mx_ResizeHandle_horizontal {
+    .mx_ResizeHandle--horizontal {
         position: relative;
 
         > div {
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 0acfef92c1..141f61937d 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -264,7 +264,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
         resizer.setClassNames({
             handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
+            vertical: "mx_ResizeHandle--vertical",
         });
         return resizer;
     }
diff --git a/src/components/structures/MainSplit.tsx b/src/components/structures/MainSplit.tsx
index b64f703d33..ab29cd2b39 100644
--- a/src/components/structures/MainSplit.tsx
+++ b/src/components/structures/MainSplit.tsx
@@ -87,7 +87,7 @@ export default class MainSplit extends React.Component<IProps> {
                     onResize={this.onResize}
                     onResizeStop={this.onResizeStop}
                     className="mx_RightPanel_ResizeWrapper"
-                    handleClasses={{ left: "mx_ResizeHandle_horizontal" }}
+                    handleClasses={{ left: "mx_ResizeHandle--horizontal" }}
                 >
                     {panelView}
                 </Resizable>
diff --git a/src/components/views/elements/ResizeHandle.tsx b/src/components/views/elements/ResizeHandle.tsx
index c3609f3129..15886d8a19 100644
--- a/src/components/views/elements/ResizeHandle.tsx
+++ b/src/components/views/elements/ResizeHandle.tsx
@@ -26,9 +26,9 @@ interface IResizeHandleProps {
 const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, id, passRef }) => {
     const classNames = ["mx_ResizeHandle"];
     if (vertical) {
-        classNames.push("mx_ResizeHandle_vertical");
+        classNames.push("mx_ResizeHandle--vertical");
     } else {
-        classNames.push("mx_ResizeHandle_horizontal");
+        classNames.push("mx_ResizeHandle--horizontal");
     }
     return (
         <div ref={passRef} className={classNames.join(" ")} data-id={id}>
diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx
index bf4e0fb0ac..e869c9ee5b 100644
--- a/src/components/views/rooms/AppsDrawer.tsx
+++ b/src/components/views/rooms/AppsDrawer.tsx
@@ -109,7 +109,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
         // (ie. a vertical resize handle because, the handle itself is vertical...)
         const classNames = {
             handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
+            vertical: "mx_ResizeHandle--vertical",
         };
         const collapseConfig = {
             onResizeStart: () => {