Fix video call container size inconsistencies (#7170)

src/components/views/rooms/AuxPanel.tsx

@@ -121,6 +121,7 @@ export default class AuxPanel extends React.Component<IProps, IState> {
             <CallViewForRoom
                 roomId={this.props.room.roomId}
                 resizeNotifier={this.props.resizeNotifier}
+                showApps={this.props.showApps}
             />
         );
 

src/components/views/voip/CallView.tsx

@@ -56,6 +56,8 @@ interface IProps {
 
     // Used for dragging the PiP CallView
     onMouseDownOnHeader?: (event: React.MouseEvent<Element, MouseEvent>) => void;
+
+    showApps?: boolean;
 }
 
 interface IState {
@@ -614,9 +616,14 @@ export default class CallView extends React.Component<IProps, IState> {
             );
         }
 
-        const myClassName = this.props.pipMode ? 'mx_CallView_pip' : 'mx_CallView_large';
+        const callViewClasses = classNames({
+            mx_CallView: true,
+            mx_CallView_pip: this.props.pipMode,
+            mx_CallView_large: !this.props.pipMode,
+            mx_CallView_belowWidget: this.props.showApps, // css to correct the margins if the call is below the AppsDrawer.
+        });
 
-        return <div className={"mx_CallView " + myClassName}>
+        return <div className={callViewClasses}>
             <CallViewHeader
                 onPipMouseDown={this.props.onMouseDownOnHeader}
                 pipMode={this.props.pipMode}

src/components/views/voip/CallViewForRoom.tsx

@@ -28,6 +28,8 @@ interface IProps {
     roomId: string;
 
     resizeNotifier: ResizeNotifier;
+
+    showApps?: boolean;
 }
 
 interface IState {
@@ -121,6 +123,7 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
                     <CallView
                         call={this.state.call}
                         pipMode={false}
+                        showApps={this.props.showApps}
                     />
                 </Resizable>
             </div>