From f12aa58aaf9718be3dbdd8c8527b775db2eb4387 Mon Sep 17 00:00:00 2001
From: Rodrigo Muniz <32344098+rcmuniz1994@users.noreply.github.com>
Date: Sun, 29 Oct 2023 14:24:18 -0300
Subject: [PATCH] fix: participant slot size for calls with up to 4 or 5
 participants (#48)

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

diff --git a/src/components/basic/Video.tsx b/src/components/basic/Video.tsx
index 050fee9..23c2f6d 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: "315px",
               },
               objectFit: "scale-down",
             }}
diff --git a/src/features/p2p-call/P2PCallMain.tsx b/src/features/p2p-call/P2PCallMain.tsx
index cb879f1..fbc24a7 100644
--- a/src/features/p2p-call/P2PCallMain.tsx
+++ b/src/features/p2p-call/P2PCallMain.tsx
@@ -82,8 +82,11 @@ export default function P2PCallMain() {
 
   const getSlotStyles = useCallback((): BoxProps["sx"] => {
     return {
-      flexBasis: "35%",
-      margin: 1,
+      flexBasis: "30%",
+      margin: {
+        xs: 0,
+        md: 1,
+      },
       width: "100%",
     };
   }, []);
@@ -125,6 +128,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",