From cb6c080828ba8b1034e2989243bebf3d5445f5ca Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 30 Nov 2020 16:44:31 +0000
Subject: [PATCH] Fix remote video being too tall and causing aux panel to
 scroll

---
 res/css/views/voip/_CallView.scss      | 3 ++-
 src/components/views/voip/CallView.tsx | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index d5e58c94c5..6cc420236f 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -25,7 +25,8 @@ limitations under the License.
 }
 
 .mx_CallView_large {
-    padding-bottom: 10px;
+    // XXX: This should be 10 but somehow it's gaining an extra 4px from somewhere...
+    padding-bottom: 6px;
 
     .mx_CallView_voice {
         height: 360px;
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index c9f5db77e6..34952f521b 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -94,6 +94,10 @@ const CONTROLS_HIDE_DELAY = 1000;
 // Height of the header duplicated from CSS because we need to subtract it from our max
 // height to get the max height of the video
 const HEADER_HEIGHT = 44;
+
+// Also duplicated from the CSS: the bottom padding on the call view
+const CALL_PADDING_BOTTOM = 10;
+
 const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
 
 export default class CallView extends React.Component<IProps, IState> {
@@ -478,7 +482,9 @@ export default class CallView extends React.Component<IProps, IState> {
             }
 
             // if we're fullscreen, we don't want to set a maxHeight on the video element.
-            const maxVideoHeight = getFullScreenElement() ? null : this.props.maxVideoHeight - HEADER_HEIGHT;
+            const maxVideoHeight = getFullScreenElement() ? null : (
+                this.props.maxVideoHeight - HEADER_HEIGHT - CALL_PADDING_BOTTOM
+            );
             contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
                 {onHoldBackground}
                 <VideoFeed type={VideoFeedType.Remote} call={this.state.call} onResize={this.props.onResize}