From 28db9e1fe5d137193543432fa13af33c69b44ebc Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Sat, 28 Oct 2023 01:42:05 -0300
Subject: [PATCH 1/3] fix: participant slot size

---
 src/components/basic/Video.tsx        | 3 ++-
 src/features/p2p-call/P2PCallMain.tsx | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/basic/Video.tsx b/src/components/basic/Video.tsx
index 050fee9..6901674 100644
--- a/src/components/basic/Video.tsx
+++ b/src/components/basic/Video.tsx
@@ -47,7 +47,8 @@ export const Video = forwardRef<HTMLVideoElement | null, VideoProps>(
               ...sx,
               height: {
                 xs: "120px",
-                md: "350px",
+                md: "230px",
+                xl: "350px",
               },
               objectFit: "scale-down",
             }}
diff --git a/src/features/p2p-call/P2PCallMain.tsx b/src/features/p2p-call/P2PCallMain.tsx
index cb879f1..f4c34be 100644
--- a/src/features/p2p-call/P2PCallMain.tsx
+++ b/src/features/p2p-call/P2PCallMain.tsx
@@ -82,7 +82,7 @@ export default function P2PCallMain() {
 
   const getSlotStyles = useCallback((): BoxProps["sx"] => {
     return {
-      flexBasis: "35%",
+      flexBasis: "30%",
       margin: 1,
       width: "100%",
     };
@@ -125,6 +125,10 @@ export default function P2PCallMain() {
             xs: "grid",
             md: "flex",
           },
+          flexWrap: {
+            xs: "unset",
+            md: "wrap",
+          },
           gridTemplateColumns: landscape ? "repeat(5, auto)" : "auto auto",
           gap: 1,
           alignItems: "center",

From 954a30eaa40039f21649ec2f361e1ac239b30dcc Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Sat, 28 Oct 2023 01:52:39 -0300
Subject: [PATCH 2/3] fix: participant slot size

---
 src/components/basic/Video.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/basic/Video.tsx b/src/components/basic/Video.tsx
index 6901674..23c2f6d 100644
--- a/src/components/basic/Video.tsx
+++ b/src/components/basic/Video.tsx
@@ -48,7 +48,7 @@ export const Video = forwardRef<HTMLVideoElement | null, VideoProps>(
               height: {
                 xs: "120px",
                 md: "230px",
-                xl: "350px",
+                xl: "315px",
               },
               objectFit: "scale-down",
             }}

From 4db914efe288fbaf790d3aec52acf7103756cd76 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Sat, 28 Oct 2023 18:07:44 -0300
Subject: [PATCH 3/3] fix: slot size for mobile devices

---
 src/features/p2p-call/P2PCallMain.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/p2p-call/P2PCallMain.tsx b/src/features/p2p-call/P2PCallMain.tsx
index f4c34be..fbc24a7 100644
--- a/src/features/p2p-call/P2PCallMain.tsx
+++ b/src/features/p2p-call/P2PCallMain.tsx
@@ -83,7 +83,10 @@ export default function P2PCallMain() {
   const getSlotStyles = useCallback((): BoxProps["sx"] => {
     return {
       flexBasis: "30%",
-      margin: 1,
+      margin: {
+        xs: 0,
+        md: 1,
+      },
       width: "100%",
     };
   }, []);