fix: participant slot size for calls with up to 4 or 5 participants (#48

)
MazuhSoftwares · Oct 29, 2023 · f12aa58 · f12aa58 · Mazuh · Oct 29, 2023
1 parent 265e14c
commit f12aa58
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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",