From e996fe638fb7f5aaf3cecbb0ad2caece657bd2bb Mon Sep 17 00:00:00 2001
From: Horatiu Muresan <horatiu.muresan@8x8.com>
Date: Tue, 12 Jul 2022 10:33:07 +0300
Subject: [PATCH] fix(virtual-background) Fix virtual backgrounds list

---
 .../components/VirtualBackgroundDialog.js      | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/react/features/virtual-background/components/VirtualBackgroundDialog.js b/react/features/virtual-background/components/VirtualBackgroundDialog.js
index f0dd8be1d..5f211ab21 100644
--- a/react/features/virtual-background/components/VirtualBackgroundDialog.js
+++ b/react/features/virtual-background/components/VirtualBackgroundDialog.js
@@ -117,7 +117,12 @@ const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackg
 
 const useStyles = makeStyles(theme => {
     return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column'
+        },
         dialog: {
+            alignSelf: 'flex-start',
             marginLeft: '-10px',
             position: 'relative',
             maxHeight: '300px',
@@ -205,10 +210,11 @@ const useStyles = makeStyles(theme => {
                     left: '51px'
                 }
             },
-            '@media (max-width: 360px)': {
-                gridTemplateColumns: 'auto auto auto'
+            '@media (max-width: 720px)': {
+                gridTemplateColumns: 'auto auto auto auto'
             },
             '@media (max-width: 632px)': {
+                gridTemplateColumns: 'auto auto auto auto auto',
                 fontSize: '1.5vw',
 
                 [[ '& .desktop-share:hover',
@@ -236,6 +242,12 @@ const useStyles = makeStyles(theme => {
                     height: '60px',
                     width: '60px'
                 }
+            },
+            '@media (max-width: 360px)': {
+                gridTemplateColumns: 'auto auto auto auto'
+            },
+            '@media (max-width: 319px)': {
+                gridTemplateColumns: 'auto auto'
             }
         },
         dialogMarginTop: {
@@ -538,7 +550,7 @@ function VirtualBackground({
                         size = 'medium' />
                 </div>
             ) : (
-                <div>
+                <div className = { classes.container }>
                     {_showUploadButton
                     && <UploadImageButton
                         setLoading = { setLoading }