Fix video call container size inconsistencies (#7170)

res/css/views/rooms/_AppsDrawer.scss

@@ -18,7 +18,9 @@ limitations under the License.
 $MiniAppTileHeight: 200px;
 
 .mx_AppsDrawer {
-    margin: 5px 5px 5px 13px;
+    margin: 5px;
+    margin-bottom: 0; // No bottom margin for the correct gap to the CallView below.
+    margin-left: 13px; // 5+8px to compensate for the scroll bar padding on the right.
     position: relative;
     display: flex;
     flex-direction: column;

res/css/views/voip/_CallView.scss

@@ -26,7 +26,7 @@ limitations under the License.
 
 .mx_CallView_large {
     padding-bottom: 10px;
-    margin: 5px 5px 5px 18px;
+    margin: 5px 5px 5px 13px;
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -34,6 +34,10 @@ limitations under the License.
     .mx_CallView_voice {
         flex: 1;
     }
+
+    &.mx_CallView_belowWidget {
+        margin-top: 0;
+    }
 }
 
 .mx_CallView_pip {

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>