diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss
index b96d14becb..9b69cbddde 100644
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@@ -201,7 +201,7 @@ $MinWidth: 240px;
     padding-bottom: 6px;
 }
 
-.mx_AppTileMenuBarTitle {
+.mx_AppTileMenuBar_title {
     line-height: 20px;
     white-space: nowrap;
     overflow: hidden;
@@ -210,13 +210,13 @@ $MinWidth: 240px;
     .mx_WidgetAvatar {
         margin-right: 12px;
     }
+
+    > :last-child {
+        margin-left: 9px;
+    }
 }
 
-.mx_AppTileMenuBarTitle > :last-child {
-    margin-left: 9px;
-}
-
-.mx_AppTileMenuBarWidgets {
+.mx_AppTileMenuBar_widgets {
     float: right;
     display: flex;
     flex-direction: row;
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
index 9b6a814194..5bc2678e70 100644
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -722,12 +722,12 @@ export default class AppTile extends React.Component<IProps, IState> {
                     {this.props.showMenubar && (
                         <div className="mx_AppTileMenuBar">
                             <span
-                                className="mx_AppTileMenuBarTitle"
+                                className="mx_AppTileMenuBar_title"
                                 style={{ pointerEvents: this.props.handleMinimisePointerEvents ? "all" : "none" }}
                             >
                                 {this.props.showTitle && this.getTileTitle()}
                             </span>
-                            <span className="mx_AppTileMenuBarWidgets">
+                            <span className="mx_AppTileMenuBar_widgets">
                                 {layoutButtons}
                                 {this.props.showPopout && !this.state.requiresClient && (
                                     <AccessibleButton