From de3c71517ff0ef846f039e576efbaf83c4aada04 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 20 Jun 2022 10:38:03 -0500
Subject: [PATCH] Update MainPanel.tsx

---
 packages/desktop/src/tree/MainPanel.tsx | 29 ++++++++++++-------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/desktop/src/tree/MainPanel.tsx b/packages/desktop/src/tree/MainPanel.tsx
index f01ca76..76ce0fe 100644
--- a/packages/desktop/src/tree/MainPanel.tsx
+++ b/packages/desktop/src/tree/MainPanel.tsx
@@ -82,7 +82,7 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
       sx={{ maxHeight: '100vh', display: 'flex', flexDirection: 'column' }}
     >
       {/* conversation header details and controls */}
-      <Box sx={{ p: 2, boxShadow: 3, zIndex: 10 }}>
+      <Box sx={{ p: 2, boxShadow: 3, zIndex: 10 }} flexDirection={'column'}>
         <Stack direction="row" alignItems="center">
           <IconButton color="primary" size="small">
             <FiSun />
@@ -121,6 +121,19 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
             </Tooltip>
           </Stack>
         </Stack>
+
+        {/* live video and screenshares */}
+        <Stack direction="row" alignItems={'center'}>
+          {masterConversation.room &&
+            Object.entries(masterConversation.room).map(([userId, userPeerContents]) => {
+              return (
+                <Video
+                  key={`userPeerRenderConvoDetails-${userId}`}
+                  stream={userPeerContents.stream}
+                />
+              );
+            })}
+        </Stack>
       </Box>
 
       <Stack direction={'column'} sx={{ flex: 1, overflowY: 'auto' }}>
@@ -156,20 +169,6 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
             <ConversationChunk />
           </Stack>
         </Container>
-
-        <Container maxWidth={false}>
-          <Stack direction="row" alignItems={'center'}>
-            {masterConversation.room &&
-              Object.entries(masterConversation.room).map(([userId, userPeerContents]) => {
-                return (
-                  <Video
-                    key={`userPeerRenderConvoDetails-${userId}`}
-                    stream={userPeerContents.stream}
-                  />
-                );
-              })}
-          </Stack>
-        </Container>
       </Stack>
     </Container>
   );