diff --git a/res/css/views/voip/_CallViewHeader.scss b/res/css/views/voip/_CallViewHeader.scss
index 1ae3c6a273..014cfce478 100644
--- a/res/css/views/voip/_CallViewHeader.scss
+++ b/res/css/views/voip/_CallViewHeader.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CallView_header {
+.mx_CallViewHeader {
     height: 44px;
     display: flex;
     flex-direction: row;
@@ -24,13 +24,13 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_CallView_header_callType {
+.mx_CallViewHeader_callType {
     font-size: 1.2rem;
     font-weight: bold;
     vertical-align: middle;
 }
 
-.mx_CallView_header_secondaryCallInfo {
+.mx_CallViewHeader_secondaryCallInfo {
     &::before {
         content: '·';
         margin-left: 6px;
@@ -38,11 +38,11 @@ limitations under the License.
     }
 }
 
-.mx_CallView_header_controls {
+.mx_CallViewHeader_controls {
     margin-left: auto;
 }
 
-.mx_CallView_header_button {
+.mx_CallViewHeader_button {
     display: inline-block;
     vertical-align: middle;
     cursor: pointer;
@@ -60,24 +60,24 @@ limitations under the License.
     }
 }
 
-.mx_CallView_header_button_fullscreen {
+.mx_CallViewHeader_button_fullscreen {
     &::before {
         mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
     }
 }
 
-.mx_CallView_header_button_expand {
+.mx_CallViewHeader_button_expand {
     &::before {
         mask-image: url('$(res)/img/element-icons/call/expand.svg');
     }
 }
 
-.mx_CallView_header_callInfo {
+.mx_CallViewHeader_callInfo {
     margin-left: 12px;
     margin-right: 16px;
 }
 
-.mx_CallView_header_roomName {
+.mx_CallViewHeader_roomName {
     font-weight: bold;
     font-size: 12px;
     line-height: initial;
@@ -88,7 +88,7 @@ limitations under the License.
     margin-left: 4px;
 }
 
-.mx_CallView_header_callTypeSmall {
+.mx_CallViewHeader_callTypeSmall {
     font-size: 12px;
     color: $secondary-fg-color;
     line-height: initial;
@@ -99,7 +99,7 @@ limitations under the License.
     max-width: 240px;
 }
 
-.mx_CallView_header_callTypeIcon {
+.mx_CallViewHeader_callTypeIcon {
     display: inline-block;
     margin-right: 6px;
     height: 16px;
@@ -119,11 +119,11 @@ limitations under the License.
         mask-position: center;
     }
 
-    &.mx_CallView_header_callTypeIcon_voice::before {
+    &.mx_CallViewHeader_callTypeIcon_voice::before {
         mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
     }
 
-    &.mx_CallView_header_callTypeIcon_video::before {
+    &.mx_CallViewHeader_callTypeIcon_video::before {
         mask-image: url('$(res)/img/element-icons/call/video-call.svg');
     }
 }
diff --git a/src/components/views/voip/CallView/CallViewHeader.tsx b/src/components/views/voip/CallView/CallViewHeader.tsx
index 710a0c4372..8fc3720ece 100644
--- a/src/components/views/voip/CallView/CallViewHeader.tsx
+++ b/src/components/views/voip/CallView/CallViewHeader.tsx
@@ -61,20 +61,20 @@ type CallControlsProps = Pick<CallViewHeaderProps, 'pipMode' | 'type'> & {
     roomId: string;
 };
 const CallViewHeaderControls: React.FC<CallControlsProps> = ({ pipMode = false, type, roomId }) => {
-    return <div className="mx_CallView_header_controls">
+    return <div className="mx_CallViewHeader_controls">
         { (pipMode && type === CallType.Video) &&
-            <AccessibleTooltipButton className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
+            <AccessibleTooltipButton className="mx_CallViewHeader_button mx_CallViewHeader_button_fullscreen"
                 onClick={onFullscreenClick}
                 title={_t("Fill Screen")}
             /> }
-        { pipMode && <AccessibleTooltipButton className="mx_CallView_header_button mx_CallView_header_button_expand"
+        { pipMode && <AccessibleTooltipButton className="mx_CallViewHeader_button mx_CallViewHeader_button_expand"
             onClick={() => onExpandClick(roomId)}
             title={_t("Return to call")}
         /> }
     </div>;
 };
 const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
-    return <span className="mx_CallView_header_secondaryCallInfo">
+    return <span className="mx_CallViewHeader_secondaryCallInfo">
         <AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}>
             <RoomAvatar room={callRoom} height={16} width={16} />
             <span className="mx_CallView_secondaryCall_roomName">
@@ -86,9 +86,9 @@ const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
 
 const CallTypeIcon: React.FC<{ type: CallType }> = ({ type }) => {
     const classes = classNames({
-        'mx_CallView_header_callTypeIcon': true,
-        'mx_CallView_header_callTypeIcon_video': type === CallType.Video,
-        'mx_CallView_header_callTypeIcon_voice': type === CallType.Voice,
+        'mx_CallViewHeader_callTypeIcon': true,
+        'mx_CallViewHeader_callTypeIcon_video': type === CallType.Video,
+        'mx_CallViewHeader_callTypeIcon_voice': type === CallType.Voice,
     });
     return <div className={classes} />;
 };
@@ -104,23 +104,23 @@ export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
     const callRoomName = callRoom.name;
     const { roomId } = callRoom;
     if (!pipMode) {
-        return <div className="mx_CallView_header">
+        return <div className="mx_CallViewHeader">
             <CallTypeIcon type={type} />
-            <span className="mx_CallView_header_callType">{ callTypeText }</span>
+            <span className="mx_CallViewHeader_callType">{ callTypeText }</span>
             <CallViewHeaderControls roomId={roomId} pipMode={pipMode} type={type} />
         </div>;
     }
     return (
         <div
-            className="mx_CallView_header"
+            className="mx_CallViewHeader"
             onMouseDown={onPipMouseDown}
         >
             <AccessibleButton onClick={() => onRoomAvatarClick(roomId)}>
                 <RoomAvatar room={callRoom} height={32} width={32} />;
             </AccessibleButton>
-            <div className="mx_CallView_header_callInfo">
-                <div className="mx_CallView_header_roomName">{ callRoomName }</div>
-                <div className="mx_CallView_header_callTypeSmall">
+            <div className="mx_CallViewHeader_callInfo">
+                <div className="mx_CallViewHeader_roomName">{ callRoomName }</div>
+                <div className="mx_CallViewHeader_callTypeSmall">
                     { callTypeText }
                     { onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} /> }
                 </div>