fix(virtual-background): Style adjustments on virtual background dial… (#9484)

* fix(virtual-background): Style adjustments on virtual background dialog on small screens.

* fix(virtual-background): Style adjustments on virtual background dialog on small screens.

Co-authored-by: tudordan7 <tudor.pop@decagon.tech>

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

@@ -1,5 +1,5 @@
 .virtual-background-dialog {
-    margin-left:-10px;
+    margin-left: -10px;
     position: relative;
     max-height: 300px;
     color: white;
@@ -7,16 +7,20 @@
     grid-template-columns: auto auto auto auto auto;
     column-gap: 9px;
     cursor: pointer;
-    .desktop-share:hover,  .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{
-        opacity: .5;
+    .desktop-share:hover,
+    .thumbnail:hover,
+    .blur:hover,
+    .slight-blur:hover,
+    .virtual-background-none:hover {
+        opacity: 0.5;
         border: 2px solid #99bbf3;
         @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
-            height: 56px;
-            width: 56px;
+            height: 60px;
+            width: 60px;
         }
-        @media (max-width: 432px){
-            height: 56px;
-            width: 56px;
+        @media (max-width: 432px) {
+            height: 60px;
+            width: 60px;
         }
     }
     .background-option {
@@ -40,28 +44,28 @@
     }
     .thumbnail-selected {
         object-fit: cover;
-        border: 2px solid #246FE5;
+        border: 2px solid #246fe5;
     }
-    .blur{
+    .blur {
         box-shadow: inset 0 0 12px #000000;
-        background: #7E8287;
+        background: #7e8287;
         padding: 0 10px;
     }
     .blur-selected {
         box-shadow: inset 0 0 12px #000000;
-        background: #7E8287;
-        border: 2px solid #246FE5;
+        background: #7e8287;
+        border: 2px solid #246fe5;
         padding: 0 10px;
     }
-    .slight-blur{
+    .slight-blur {
         box-shadow: inset 0 0 12px #000000;
-        background: #A4A4A4;
+        background: #a4a4a4;
         padding: 0 10px;
     }
-    .slight-blur-selected{
+    .slight-blur-selected {
         box-shadow: inset 0 0 12px #000000;
-        background: #A4A4A4;
-        border: 2px solid #246FE5;
+        background: #a4a4a4;
+        border: 2px solid #246fe5;
         padding: 0 10px;
     }
     .virtual-background-none {
@@ -70,27 +74,59 @@
     }
     .none-selected {
         background: #525252;
-        border: 2px solid #246FE5;
+        border: 2px solid #246fe5;
         padding: 0 10px;
     }
 
-    .desktop-share{
+    .desktop-share {
         background: #525252;
     }
-    .desktop-share-selected{
+    .desktop-share-selected {
         background: #525252;
-        border: 2px solid #246FE5;
+        border: 2px solid #246fe5;
         padding: 0 10px;
     }
 
     @media (min-width: 432px) and (max-width: 632px) {
         font-size: 1.5vw;
+        .desktop-share,
+        .virtual-background-none,
+        .thumbnail,
+        .blur,
+        .slight-blur {
+            height: 60px;
+            width: 60px;
+        }
+        .desktop-share-selected,
+        .thumbnail-selected,
+        .none-selected,
+        .blur-selected,
+        .slight-blur-selected {
+            height: 60px;
+            width: 60px;
+        }
     }
-    @media (max-width: 432px){
+    @media (max-width: 432px) {
         grid-template-columns: auto auto auto;
         font-size: 1.5vw;
+        .desktop-share,
+        .virtual-background-none,
+        .thumbnail,
+        .blur,
+        .slight-blur {
+            height: 60px;
+            width: 60px;
+        }
+        .desktop-share-selected,
+        .thumbnail-selected,
+        .none-selected,
+        .blur-selected,
+        .slight-blur-selected {
+            height: 60px;
+            width: 60px;
+        }
     }
-    @media (max-width: 320px){
+    @media (max-width: 320px) {
         grid-template-columns: auto auto auto;
         font-size: 1.5vw;
     }
@@ -109,14 +145,14 @@
 .file-upload-btn {
     display: none;
 }
-.file-upload-label{
+.file-upload-label {
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     margin-left: -10px;
     margin-top: 16px;
     margin-bottom: 8px;
-    color: #669AEC;
+    color: #669aec;
     display: inline-flex;
     cursor: pointer;
 }
@@ -128,7 +164,7 @@
     left: 96;
     bottom: 51;
     @media (min-width: 432px) and (max-width: 632px) {
-        left: 51px
+        left: 51px;
     }
 }
 
@@ -139,22 +175,22 @@
 .thumbnail-container {
     position: relative;
     &:focus-within {
-        .thumbnail ~ .delete-image-icon{
-           display: block;
-       }
+        .thumbnail ~ .delete-image-icon {
+            display: block;
+        }
     }
 }
 
-.add-background{
+.add-background {
     margin-right: 8px;
 }
 
-.apply-background-btn{
+.apply-background-btn {
     margin-top: 16px;
     float: right;
- }
+}
 
- .video-background-preview-entry{
+.video-background-preview-entry {
     margin-left: -10px;
     height: 250px;
     width: 570px;
@@ -163,33 +199,33 @@
     @media (min-width: 432px) and (max-width: 632px) {
         max-width: 336;
     }
-    @media (max-width: 432px){
+    @media (max-width: 432px) {
         max-width: 336;
     }
- }
+}
 
- .virtual-background-preview-video{
+.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;
-     height: 250px;
-     margin-bottom: 8px;
-     width: 572px;
-     position: fixed;
-     z-index: 2;
-     @media (min-width: 432px) and (max-width: 632px) {
-         width: 340px;
-     }
- }
+}
+.video-preview-loader {
+    border-radius: 6px;
+    background-color: transparent;
+    height: 250px;
+    margin-bottom: 8px;
+    width: 572px;
+    position: fixed;
+    z-index: 2;
+    @media (min-width: 432px) and (max-width: 632px) {
+        width: 340px;
+    }
+}
 
- .video-preview-loader svg{
+.video-preview-loader svg {
     position: absolute;
     top: 40%;
     left: 45%;
- }
+}