From 5e92efc7e56d5fa0c350de86039694c9e7920892 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 20 Jun 2022 10:29:50 -0500
Subject: [PATCH] nice figured it out slowly

---
 packages/desktop/src/tree/MainPanel.tsx | 92 +++++++++++++------------
 1 file changed, 48 insertions(+), 44 deletions(-)

diff --git a/packages/desktop/src/tree/MainPanel.tsx b/packages/desktop/src/tree/MainPanel.tsx
index b0155df..7b40dd8 100644
--- a/packages/desktop/src/tree/MainPanel.tsx
+++ b/packages/desktop/src/tree/MainPanel.tsx
@@ -76,8 +76,54 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
   }, [masterConversation, user]);
 
   return (
-    <Container maxWidth={false} disableGutters>
-      <Stack direction={'column'} sx={{ position: 'relative' }}>
+    <Container
+      maxWidth={false}
+      disableGutters
+      sx={{ maxHeight: '100vh', display: 'flex', flexDirection: 'column' }}
+    >
+      {/* conversation header details and controls */}
+      <Box sx={{ p: 2, boxShadow: 3, zIndex: 10 }}>
+        <Stack direction="row" alignItems="center">
+          <IconButton color="primary" size="small">
+            <FiSun />
+          </IconButton>
+          <ConversationLabel
+            users={masterConversation.members}
+            conversationName={masterConversation.name}
+            isSelected={true}
+          />
+
+          {/* conversation controls */}
+          <Stack
+            direction="row"
+            alignItems="center"
+            sx={{
+              ml: 'auto',
+            }}
+            spacing={1}
+          >
+            <Tooltip title="Add to priority panel!">
+              {isPriority ? (
+                <Fab size="small" color="primary">
+                  <FiZap />
+                </Fab>
+              ) : (
+                <IconButton size="small">
+                  <FiZap />
+                </IconButton>
+              )}
+            </Tooltip>
+
+            <Tooltip title="Add people to the conversation">
+              <IconButton size="small">
+                <FiUserPlus />
+              </IconButton>
+            </Tooltip>
+          </Stack>
+        </Stack>
+      </Box>
+
+      <Stack direction={'column'} sx={{ flex: 1, overflowY: 'auto' }}>
         {/* main canvas */}
         <Container maxWidth={'sm'} sx={{ pt: 2 }}>
           <Stack spacing={1} sx={{ display: 'flex', flexDirection: 'column', py: 2 }}>
@@ -124,48 +170,6 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
               })}
           </Stack>
         </Container>
-
-        {/* conversation header details and controls */}
-        <Box sx={{ p: 2, boxShadow: 3, zIndex: 10, position: 'sticky' }}>
-          <Stack direction="row" alignItems="center">
-            <IconButton color="primary" size="small">
-              <FiSun />
-            </IconButton>
-            <ConversationLabel
-              users={masterConversation.members}
-              conversationName={masterConversation.name}
-              isSelected={true}
-            />
-
-            {/* conversation controls */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              sx={{
-                ml: 'auto',
-              }}
-              spacing={1}
-            >
-              <Tooltip title="Add to priority panel!">
-                {isPriority ? (
-                  <Fab size="small" color="primary">
-                    <FiZap />
-                  </Fab>
-                ) : (
-                  <IconButton size="small">
-                    <FiZap />
-                  </IconButton>
-                )}
-              </Tooltip>
-
-              <Tooltip title="Add people to the conversation">
-                <IconButton size="small">
-                  <FiUserPlus />
-                </IconButton>
-              </Tooltip>
-            </Stack>
-          </Stack>
-        </Box>
       </Stack>
     </Container>
   );