fix(virtual-background): Responsive virtual background dialog

Fixes: https://github.com/jitsi/jitsi-meet/issues/9202

css/modals/virtual-background/_virtual-background.scss

@@ -1,17 +1,22 @@
 .virtual-background-dialog {
+    margin-left:-10px;
     position: relative;
     max-height: 300px;
     color: white;
     display: inline-grid;
     grid-template-columns: auto auto auto auto auto;
-    column-gap: 8px;
+    column-gap: 9px;
     cursor: pointer;
     .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{
         height: 56px;
         width: 103px;
         opacity: .5;
         border: 2px solid #99bbf3;
-        @media (min-width: 432px) and (max-width: 632px) {
+        @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
+            height: 56px;
+            width: 56px;
+        }
+        @media (max-width: 432px){
             height: 56px;
             width: 56px;
         }
@@ -31,8 +36,8 @@
         margin-top: 8px;
         border-radius: 6px;
         object-fit: cover;
-        height: 60px;
-        width: 107px;
+        height: 56px;
+        width: 103px;
         border: 2px solid #246FE5;
     }
     .blur{
@@ -52,8 +57,8 @@
         margin-top: 8px;
         background: #7E8287;
         font-weight: bold;
-        height: 60px;
-        width: 107px;
+        height: 56px;
+        width: 103px;
         border-radius: 6px;
         border: 2px solid #246FE5;
         text-align: center;
@@ -77,8 +82,8 @@
         margin-top: 8px;
         background: #A4A4A4;
         font-weight: bold;
-        height: 60px;
-        width: 107px;
+        height: 56px;
+        width: 103px;
         border-radius: 6px;
         border: 2px solid #246FE5;
         text-align: center;
@@ -100,8 +105,8 @@
         margin-top: 8px;
         background: #525252;
         font-weight: bold;
-        height: 60px;
-        width: 107px;
+        height: 56px;
+        width: 103px;
         border-radius: 6px;
         border: 2px solid #246FE5;
         text-align: center;
@@ -111,10 +116,25 @@
 
     @media (min-width: 432px) and (max-width: 632px) {
         font-size: 1.5vw;
-        .virtual-background-none, .thumbnail, .thumbnail-selected, .none-selected, .blur, .blur-selected, .slight-blur, .slight-blur-selected{
+        .virtual-background-none, .thumbnail, .blur, .slight-blur{
             height: 60px;
             width: 60px;
         }
+        .thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{
+            height: 56px;
+            width: 56px;
+        }
+    }
+    @media (max-width: 432px){
+        font-size: 1.5vw;
+        .virtual-background-none, .thumbnail, .blur, .slight-blur{
+            height: 60px;
+            width: 60px;
+        }
+        .thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{
+            height: 56px;
+            width: 56px;
+        }
     }
 }
 
@@ -135,6 +155,7 @@
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
+    margin-left: -10px;
     margin-top: 16px;
     margin-bottom: 8px;
     color: #669AEC;
@@ -151,6 +172,9 @@
     @media (min-width: 432px) and (max-width: 632px) {
         left: 51px
     }
+    @media (min-width: 432px) {
+        left: 51px
+    }
 }
 .delete-image-icon:hover {
     display: block;
@@ -170,16 +194,21 @@
  }
 
  .video-background-preview-entry{
+    margin-left:5px;
     height: 250px;
+    width: 94%;
     margin-bottom: 8px;
-    width: 572px;
-    position: fixed;
+    position: absolute;
     z-index: 2;
-    @media (min-width: 432px) and (max-width: 632px) {
-        width: 340px;
-    }
  }
 
+ .virtual-background-preview-video{
+    margin-left: -10;
+    border-radius: 6px;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+ }
  .video-preview-loader{
      border-radius: 6px;
      background-color: transparent;

react/features/virtual-background/components/VirtualBackgroundDialog.js

@@ -180,8 +180,7 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Pro
             okKey = { 'virtualBackground.apply' }
             onSubmit = { applyVirtualBackground }
             submitDisabled = { !options || loading }
-            titleKey = { 'virtualBackground.title' }
-            width = '640px'>
+            titleKey = { 'virtualBackground.title' } >
             <VirtualBackgroundPreview options = { options } />
             {loading ? (
                 <div className = 'virtual-background-loading'>

react/features/virtual-background/components/VirtualBackgroundPreview.js

@@ -10,7 +10,7 @@ import { getCurrentCameraDeviceId } from '../../base/settings';
 import { createLocalTracksF } from '../../base/tracks/functions';
 import { toggleBackgroundEffect } from '../actions';
 
-const videoClassName = 'video-preview-video flipVideoX';
+const videoClassName = 'virtual-background-preview-video flipVideoX';
 
 /**
  * The type of the React {@code PureComponent} props of {@link VirtualBackgroundPreview}.