shifting things around so that convo header is cleaner and have footer for displaying videos

packages/desktop/src/tree/MainPanel.tsx

@@ -79,10 +79,17 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
     <Container
       maxWidth={false}
       disableGutters
-      sx={{ maxHeight: '100vh', display: 'flex', flexDirection: 'column' }}
+      sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
     >
-      {/* conversation header details and controls */}
+      {/* conversation header */}
-      <Box className={'titlebar'} sx={{ p: 2, boxShadow: 3, zIndex: 10 }} flexDirection={'column'}>
+      <Box
+        className={'titlebar'}
+        sx={{
+          p: 1,
+          borderBottom: `1px solid`,
+          borderBottomColor: blueGrey[50],
+        }}
+      >
         <Stack direction="row" alignItems="center">
           <IconButton color="primary" size="small">
             <FiSun />
@@ -102,20 +109,6 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
             }}
             spacing={1}
           >
-            <Tooltip title="Paste image or link!">
-              <IconButton size="small">
-                <FiLink />
-              </IconButton>
-            </Tooltip>
-
-            <Tooltip title="Share screen!">
-              <IconButton size="small">
-                <FiAirplay />
-              </IconButton>
-            </Tooltip>
-
-            <Divider orientation={'vertical'} flexItem />
-
             <Tooltip title="Add people to the conversation">
               <IconButton size="small">
                 <FiUserPlus />
@@ -123,19 +116,6 @@ 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' }}>
@@ -325,6 +305,35 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
           </Stack>
         </Container>
       </Stack>
+
+      <Box sx={{ p: 2, boxShadow: 3, zIndex: 10 }} flexDirection={'column'} mt={'auto'}>
+        {/* 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>
+
+        <Stack direction="row" alignItems="center" justifyContent={'flex-end'}>
+          <Tooltip title="Paste image or link!">
+            <IconButton size="small">
+              <FiLink />
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title="Share screen!">
+            <IconButton size="small">
+              <FiAirplay />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+      </Box>
     </Container>
   );
 }

packages/desktop/src/tree/Terminal.tsx

@@ -39,7 +39,7 @@ export default function Terminal() {
               item
               xs={4}
               sx={{
-                zIndex: 2,
+                zIndex: 10,
                 backgroundColor: blueGrey[50],
                 boxShadow: 3,
                 borderRight: `1px solid ${blueGrey}`,