From 6157edcf7d293f1819bcd4223334ea9aacd90b8a Mon Sep 17 00:00:00 2001
From: Pallavi Das <palldas37@gmail.com>
Date: Thu, 23 May 2024 15:06:54 -0700
Subject: [PATCH 1/2] cool

---
 .../src/components/Friends_List_Component.tsx  | 18 +++++++++++-------
 frontend/src/pages/ProfilePage.tsx             |  6 +++++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Friends_List_Component.tsx b/frontend/src/components/Friends_List_Component.tsx
index dc5b029..8c97569 100644
--- a/frontend/src/components/Friends_List_Component.tsx
+++ b/frontend/src/components/Friends_List_Component.tsx
@@ -96,8 +96,6 @@ const Friends_List: React.FC<Props> = ({
     try {
       console.log(friendId);
       // Assuming you have the userId available in your state or props
-
-      // Send a DELETE request to the backend API
       const response = await fetch(
         `http://localhost:3001/users/${LoggedInUser}/remove-friend`,
         {
@@ -105,12 +103,11 @@ const Friends_List: React.FC<Props> = ({
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ friendId: friendId }), // Send the friend's ID in the request body
+          body: JSON.stringify({ friendId: friendId }),
         },
       );
 
       if (response.ok) {
-        // If the backend request was successful, update the frontend state
         setFriends(friends.filter((friend) => friend.id !== friendId));
       } else {
         console.error("Failed to remove friend from backend");
@@ -221,7 +218,6 @@ const Friends_List: React.FC<Props> = ({
   };
 
   const handleGroupClick = async (groupId: string, friendId: string) => {
-    // Handle the logic to add a friend to the group
     try {
       console.log(`Group ID: ${groupId} clicked`);
       console.log(`USER ID: ${friendId} clicked`);
@@ -233,7 +229,15 @@ const Friends_List: React.FC<Props> = ({
 
   return (
     <Box width="100%">
-      <Box padding="4" bg="gray.100" borderRadius="md">
+      <Box
+        padding="4"
+        bg="gray.100"
+        borderRadius="md"
+        position="sticky"
+        top="0"
+        zIndex="1"
+        bg="white"
+      >
         <FormControl>
           <Stack direction="row" spacing={4}>
             <Input
@@ -247,7 +251,7 @@ const Friends_List: React.FC<Props> = ({
           </Stack>
         </FormControl>
       </Box>
-      <TableContainer maxHeight="calc(50vh - 80px)" overflowY="auto">
+      <TableContainer>
         <Table variant="simple">
           <Thead>
             <Tr>
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 1d07ec7..34285a8 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -31,11 +31,15 @@ const ProfilePage: React.FC<ProfilePageProps> = ({
             mb={4}
             p={4}
             height="50%"
+            display="flex"
+            flexDirection="column"
           >
             <Heading size="md" mb={4}>
               Friends List
             </Heading>
-            <Friends_List LoggedInUser={LoggedInUser} />
+            <Box flex="1" overflowY="auto">
+              <Friends_List LoggedInUser={LoggedInUser} />
+            </Box>
           </Box>
           <Box bg="white" borderRadius="md" boxShadow="md" p={4} height="48%">
             <Heading size="md" mb={4}>

From ceccb288cf2cb4e5b4eb246412947404bb1623db Mon Sep 17 00:00:00 2001
From: Pallavi Das <palldas37@gmail.com>
Date: Thu, 23 May 2024 15:11:40 -0700
Subject: [PATCH 2/2] Update Friends_List_Component.tsx

---
 frontend/src/components/Friends_List_Component.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Friends_List_Component.tsx b/frontend/src/components/Friends_List_Component.tsx
index 8c97569..7a49054 100644
--- a/frontend/src/components/Friends_List_Component.tsx
+++ b/frontend/src/components/Friends_List_Component.tsx
@@ -236,7 +236,6 @@ const Friends_List: React.FC<Props> = ({
         position="sticky"
         top="0"
         zIndex="1"
-        bg="white"
       >
         <FormControl>
           <Stack direction="row" spacing={4}>