fix(quality-slider): prevent resizing by making p2p warning hidden (#1890)

* fix(quality-slider): prevent resizing by making p2p warning hidden

Instead of removing and appending the p2p warning, make it always
appended but toggle visibility so it always takes up space. This
should prevent resizing when the warning appears. Margin and
padding were adjusted to account for the empty space displayed
by a hidden p2p warning.

* let vertical size change

css/modals/video-quality/_video-quality.scss

@@ -1,6 +1,11 @@
 .video-quality-dialog {
     color: $modalTextColor;
 
+    .hide-warning {
+        height: 0;
+        visibility: hidden;
+    }
+
     .video-quality-dialog-title {
         margin-bottom: 10px;
     }

react/features/video-quality/components/VideoQualityDialog.web.js

@@ -115,13 +115,16 @@ class VideoQualityDialog extends Component {
     render() {
         const { _audioOnly, _p2p, t } = this.props;
         const activeSliderOption = this._mapCurrentQualityToSliderValue();
+        const showP2PWarning = _p2p && !_audioOnly;
 
         return (
             <div className = 'video-quality-dialog'>
                 <h3 className = 'video-quality-dialog-title'>
                     { t('videoStatus.callQuality') }
                 </h3>
-                { !_audioOnly && _p2p ? this._renderP2PMessage() : null }
+                <div className = { showP2PWarning ? '' : 'hide-warning' }>
+                    { this._renderP2PMessage() }
+                </div>
                 <div className = 'video-quality-dialog-contents'>
                     <div className = 'video-quality-dialog-slider-container'>
                         { /* FIXME: onChange and onMouseUp are both used for