improves video preview modal

bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss

@@ -13,7 +13,7 @@
 }
 
 .content {
-  overflow: auto;
+  overflow: visible;
   color: var(--color-text);
   font-weight: normal;
   padding: var(--line-height-computed) 0;

bigbluebutton-html5/imports/ui/components/video-preview/component.jsx

@@ -812,7 +812,10 @@ class VideoPreview extends Component {
     return (
       <Modal
         overlayClassName={styles.overlay}
-        className={styles.modal}
+        className={cx({
+          [styles.modal]: true,
+          [styles.modalPhone]: deviceInfo.isPhone,
+        })}
         onRequestClose={this.handleProceed}
         hideBorder
         contentLabel={intl.formatMessage(intlMessages.webcamSettingsTitle)}

bigbluebutton-html5/imports/ui/components/video-preview/styles.scss

@@ -94,21 +94,20 @@
 .videoCol {
   @extend .col;
   align-items: center;
+
+  @include mq($landscape) {
+    width: 33.3%;
+  }
 }
 
 .content {
   display: flex;
-  min-height: 14rem;
-  max-height: 50vh;
   justify-content: center;
   align-items: center;
 
   @include mq($small-only) {
     flex-direction: column;
-    height: unset;
     margin: 0;
-    min-height: 12rem;
-    max-height: unset;
   }
 }
 
@@ -129,8 +128,22 @@
 }
 
 .modal {
-  padding: 1rem;
   @extend .modal;
+  padding: 1rem;
+  min-height: 25rem;
+  max-height: 60vh;
+
+  @include mq($small-only) {
+    height: unset;
+    min-height: 22.5rem;
+    max-height: unset;
+  }
+}
+
+.modalPhone {
+  min-height: 100%;
+  min-width: 100%;
+  border-radius: 0;
 }
 
 .overlay {