feat: improve video layout

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)`,

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',
+          alignContent: 'space-around',
-          alignItems: 'center',
           display: 'flex',
           flexDirection: 'row',
           flexGrow: 1,
@@ -149,8 +148,9 @@ export const RoomVideoDisplay = ({ userId }: RoomVideoDisplayProps) => {
           overflow: 'auto',
           width: '100%',
           ...(selectedPeerStream && {
-            height: '15%',
+            height: '20%',
-            maxHeight: '15%',
+            maxHeight: '20%',
+            pt: '0.5em',
           }),
         }}
       >