From 373ea22d2ced03942a512c09d33b8a31f61aa303 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Tue, 15 Nov 2022 22:02:18 -0600
Subject: [PATCH] feat: improve video layout

---
 src/components/Room/PeerVideo.tsx        |  4 ++--
 src/components/Room/RoomVideoDisplay.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Room/PeerVideo.tsx b/src/components/Room/PeerVideo.tsx
index 29ab569..e6aca28 100644
--- a/src/components/Room/PeerVideo.tsx
+++ b/src/components/Room/PeerVideo.tsx
@@ -63,10 +63,10 @@ export const PeerVideo = ({
         justifyContent: 'center',
         mx: 'auto',
         overflow: 'auto',
-        py: 2,
+        padding: 2,
         ...(selectedPeerStream
           ? {
-              height: 'calc(100% - 0.5em)',
+              height: '100%',
             }
           : {
               width: `calc(${sizePercent}% - 1em)`,
diff --git a/src/components/Room/RoomVideoDisplay.tsx b/src/components/Room/RoomVideoDisplay.tsx
index b2c745a..cabf07d 100644
--- a/src/components/Room/RoomVideoDisplay.tsx
+++ b/src/components/Room/RoomVideoDisplay.tsx
@@ -125,7 +125,7 @@ export const RoomVideoDisplay = ({ userId }: RoomVideoDisplayProps) => {
       }}
     >
       {selectedPeerStream && (
-        <Box sx={{ height: '85%' }}>
+        <Box sx={{ height: '80%' }}>
           <PeerVideo
             isSelectedVideo
             numberOfVideos={numberOfVideos}
@@ -139,8 +139,7 @@ export const RoomVideoDisplay = ({ userId }: RoomVideoDisplayProps) => {
       )}
       <Box
         sx={{
-          alignContent: 'center',
-          alignItems: 'center',
+          alignContent: 'space-around',
           display: 'flex',
           flexDirection: 'row',
           flexGrow: 1,
@@ -149,8 +148,9 @@ export const RoomVideoDisplay = ({ userId }: RoomVideoDisplayProps) => {
           overflow: 'auto',
           width: '100%',
           ...(selectedPeerStream && {
-            height: '15%',
-            maxHeight: '15%',
+            height: '20%',
+            maxHeight: '20%',
+            pt: '0.5em',
           }),
         }}
       >