diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss
index ad75493201..709a4a627c 100644
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@@ -29,10 +29,6 @@ limitations under the License.
     overflow: hidden;
     flex-grow: 1;
 
-    &.mx_AppsDrawer_maximise {
-        margin-bottom: var(--container-gap-width);
-    }
-
     .mx_AppsContainer_resizerHandleContainer {
         width: 100%;
         height: 10px;
@@ -96,7 +92,15 @@ limitations under the License.
         min-width: var(--minWidth);
     }
 
-    &.mx_AppsDrawer_2apps .mx_AppTile {
+    &.mx_AppsDrawer--maximised {
+        margin-bottom: var(--container-gap-width);
+    }
+
+    &.mx_AppsDrawer--resizing .mx_AppTile_persistedWrapper {
+        z-index: 1;
+    }
+
+    &.mx_AppsDrawer--2apps .mx_AppTile {
         width: 50%;
 
         &:nth-child(3) {
@@ -105,7 +109,7 @@ limitations under the License.
             min-width: var(--minWidth) !important;
         }
     }
-    &.mx_AppsDrawer_3apps .mx_AppTile {
+    &.mx_AppsDrawer--3apps .mx_AppTile {
         width: 33%;
 
         &:nth-child(3) {
@@ -419,7 +423,3 @@ limitations under the License.
         opacity: 1;
     }
 }
-
-.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
-    z-index: 1;
-}
diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx
index 3f28df013f..13e7707d2f 100644
--- a/src/components/views/rooms/AppsDrawer.tsx
+++ b/src/components/views/rooms/AppsDrawer.tsx
@@ -114,11 +114,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
         };
         const collapseConfig = {
             onResizeStart: () => {
-                this.resizeContainer?.classList.add("mx_AppsDrawer_resizing");
+                this.resizeContainer?.classList.add("mx_AppsDrawer--resizing");
                 this.setState({ resizingHorizontal: true });
             },
             onResizeStop: () => {
-                this.resizeContainer?.classList.remove("mx_AppsDrawer_resizing");
+                this.resizeContainer?.classList.remove("mx_AppsDrawer--resizing");
                 WidgetLayoutStore.instance.setResizerDistributions(
                     this.props.room,
                     Container.Top,
@@ -254,11 +254,11 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
         }
 
         const classes = classNames({
-            mx_AppsDrawer: true,
-            mx_AppsDrawer_maximise: widgetIsMaxmised,
-            mx_AppsDrawer_resizing: this.state.resizing,
-            mx_AppsDrawer_2apps: apps.length === 2,
-            mx_AppsDrawer_3apps: apps.length === 3,
+            "mx_AppsDrawer": true,
+            "mx_AppsDrawer--maximised": widgetIsMaxmised,
+            "mx_AppsDrawer--resizing": this.state.resizing,
+            "mx_AppsDrawer--2apps": apps.length === 2,
+            "mx_AppsDrawer--3apps": apps.length === 3,
         });
         const appContainers = (
             <div className="mx_AppsContainer" ref={this.collectResizer}>