initially getting it vertical and I kind of like the feel

packages/desktop/src/tree/FooterControls.tsx

@@ -70,13 +70,7 @@ export default function FooterControls() {
   return (
     <Box
       sx={{
-        mt: 'auto',
+        maxWidth: 100,
-        borderTop: '1px solid',
-        borderTopColor: blueGrey[100],
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        width: '100%',
 
         zIndex: 10,
         boxShadow: 10,
@@ -85,7 +79,7 @@ export default function FooterControls() {
       }}
     >
       <Stack
-        direction={'row'}
+        direction={'column'}
         alignItems={'center'}
         justifyContent={'flex-start'}
         sx={{
@@ -94,7 +88,7 @@ export default function FooterControls() {
           flex: 1,
         }}
       >
-        <Stack spacing={1} direction={'row'} alignItems={'center'}>
+        <Stack spacing={1} direction={'column'} alignItems={'center'}>
           <IconButton
             onClick={handleClickProfile}
             size="small"
@@ -127,41 +121,21 @@ export default function FooterControls() {
         </Stack>
 
         {selectedConversation && (
-          <>
+          <Stack direction={'column'} spacing={1}>
-            <Stack
+            <AvatarGroup
-              direction={'row'}
+              variant={'rounded'}
-              sx={{
-                flex: 1,
-                mx: 'auto',
-
-                WebkitAppRegion: 'drag',
-                cursor: 'pointer',
-              }}
-              alignItems={'center'}
-              justifyContent={'center'}
-              spacing={1}
-            >
-              <Container
-                maxWidth={'sm'}
               sx={{
                 display: 'flex',
-                  justifyContent: 'center',
+                flexDirection: 'column',
+                '& >:first-child': {
+                  marginTop: 0,
+                },
+                '& > *': {
+                  marginLeft: '0 !important' as any,
+                  marginTop: -2,
+                },
               }}
             >
-                <IconButton color="primary" size="small">
-                  <FiSun />
-                </IconButton>
-
-                <ConversationLabel
-                  users={selectedConversation.members ?? []}
-                  conversationName={selectedConversation.name}
-                  isSelected={true}
-                />
-              </Container>
-            </Stack>
-
-            <Stack sx={{ ml: 'auto' }} direction={'row'} spacing={1}>
-              <AvatarGroup variant={'rounded'}>
               {selectedConversation.members?.map((conversationUser, index) => (
                 <Avatar
                   key={`${selectedConversation._id.toString()}-${conversationUser._id.toString()}-convoIcon`}
@@ -234,7 +208,6 @@ export default function FooterControls() {
               </IconButton>
             </Tooltip>
           </Stack>
-          </>
         )}
       </Stack>
 

packages/desktop/src/tree/Terminal.tsx

@@ -22,7 +22,7 @@ export default function Terminal() {
       disableGutters={true}
       sx={{
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'row',
       }}
     >
       <Grid container spacing={0} sx={{ flex: 1 }}>