[mirotalksfu] - set vertical/horizontal pin video grid

public/css/Room.css

@@ -64,9 +64,8 @@
     --btns-width: 320px;
     --btns-flex-direction: row;
     */
-    /* 
-        https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
-    */
+    --vmi-wh: 15vw;
+    /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
     --videoObjFit: cover;
 }
 
@@ -186,7 +185,7 @@ body {
     position: absolute;
     margin: auto;
     padding: 10px;
-    min-width: 320px;
+    width: 370px;
     min-height: 480px;
     background: var(--settings-bg);
     box-shadow: var(--box-shadow);
@@ -209,7 +208,7 @@ body {
 
 #mySettings select {
     width: auto;
-    max-width: 270px;
+    max-width: 320px;
     height: 40px;
     color: #fff;
     background-color: transparent;

public/css/VideoGrid.css

@@ -7,8 +7,8 @@
     position: absolute;
     display: flex;
     top: 0;
-    height: 100%;
     width: 100%;
+    height: 100%;
     border-radius: 5px;
     align-content: center;
     flex-wrap: wrap;
@@ -16,6 +16,7 @@
     justify-content: center;
     vertical-align: middle;
     overflow: hidden;
+    /* border: 3px solid blue; */
 }
 
 #videoPinMediaContainer {
@@ -24,8 +25,8 @@
     display: none;
     top: 0;
     left: 0;
-    height: 100%;
     width: 75%;
+    height: 100%;
     border-radius: 5px;
     box-shadow: var(--box-shadow);
     overflow: hidden;
@@ -107,8 +108,8 @@
 #videoMediaContainer img {
     position: absolute;
     display: none;
-    width: 15vw;
-    height: 15vw;
+    width: var(--vmi-wh);
+    height: var(--vmi-wh);
 }
 
 .videoMenuBar {