From e6b21144e25412494bc137c9953e6df6942efb29 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 14 Jul 2024 13:49:36 +0530
Subject: [PATCH] Conversations list should resize to take max space on side
 panel

---
 .../sidePanel/chatHistorySidePanel.tsx        | 60 ++++++++++---------
 .../components/sidePanel/sidePanel.module.css |  5 +-
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index 6d6d3d5d..7c45a169 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -332,35 +332,37 @@ interface SessionsAndFilesProps {
 function SessionsAndFiles(props: SessionsAndFilesProps) {
     return (
         <>
-            <ScrollArea className="h-[40vh]">
-                <ScrollAreaScrollbar orientation="vertical" className="h-full w-2.5 border-l border-l-transparent p-[1px]" />
-                <div className={styles.sessionsList}>
-                    {props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData).map((timeGrouping) => (
-                        <div key={timeGrouping} className={`my-4`}>
-                            <div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
-                                {timeGrouping}
+            <div>
+                <ScrollArea>
+                    <ScrollAreaScrollbar orientation="vertical" className="h-full w-2.5 border-l border-l-transparent p-[1px]" />
+                    <div className={styles.sessionsList}>
+                        {props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData).map((timeGrouping) => (
+                            <div key={timeGrouping} className={`my-4`}>
+                                <div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
+                                    {timeGrouping}
+                                </div>
+                                {props.subsetOrganizedData && props.subsetOrganizedData[timeGrouping].map((chatHistory) => (
+                                    <ChatSession
+                                        created={chatHistory.created}
+                                        compressed={true}
+                                        key={chatHistory.conversation_id}
+                                        conversation_id={chatHistory.conversation_id}
+                                        slug={chatHistory.slug}
+                                        agent_avatar={chatHistory.agent_avatar}
+                                        agent_name={chatHistory.agent_name}
+                                        showSidePanel={props.setEnabled}
+                                        />
+                                ))}
                             </div>
-                            {props.subsetOrganizedData && props.subsetOrganizedData[timeGrouping].map((chatHistory) => (
-                                <ChatSession
-                                    created={chatHistory.created}
-                                    compressed={true}
-                                    key={chatHistory.conversation_id}
-                                    conversation_id={chatHistory.conversation_id}
-                                    slug={chatHistory.slug}
-                                    agent_avatar={chatHistory.agent_avatar}
-                                    agent_name={chatHistory.agent_name}
-                                    showSidePanel={props.setEnabled}
-                                    />
-                            ))}
-                        </div>
-                    ))}
-                </div>
-            </ScrollArea>
-            {
-                (props.data && props.data.length > 5) && (
-                    <ChatSessionsModal data={props.organizedData} showSidePanel={props.setEnabled} />
-                )
-            }
+                        ))}
+                    </div>
+                </ScrollArea>
+                {
+                    (props.data && props.data.length > 5) && (
+                        <ChatSessionsModal data={props.organizedData} showSidePanel={props.setEnabled} />
+                    )
+                }
+            </div>
             <FilesMenu conversationId={props.conversationId} uploadedFiles={props.uploadedFiles} isMobileWidth={props.isMobileWidth} />
             {props.userProfile &&
                 <UserProfileComponent userProfile={props.userProfile} webSocketConnected={props.webSocketConnected} collapsed={false} />
@@ -546,7 +548,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
         <Dialog>
             <DialogTrigger
                 className="flex text-left text-medium text-gray-500 hover:text-gray-300 cursor-pointer my-4 text-sm p-[0.5rem]">
-                <span className="mr-2">See All <ArrowRight className="h-4 w-4" /></span>
+                <span className="mr-2">See All <ArrowRight className="inline h-4 w-4" weight="bold"/></span>
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
diff --git a/src/interface/web/app/components/sidePanel/sidePanel.module.css b/src/interface/web/app/components/sidePanel/sidePanel.module.css
index fc6918c0..7941a0c4 100644
--- a/src/interface/web/app/components/sidePanel/sidePanel.module.css
+++ b/src/interface/web/app/components/sidePanel/sidePanel.module.css
@@ -11,7 +11,7 @@ div.session {
 }
 
 div.compressed {
-    grid-template-columns: minmax(auto, 12rem) 1fr 1fr;
+    grid-template-columns: minmax(12rem, 100%) 1fr 1fr;
 }
 
 div.sessionHover {
@@ -85,11 +85,10 @@ div.profile {
 div.panelWrapper {
     display: grid;
     padding: 0 1rem;
-    grid-template-rows: auto 1fr auto auto;
+    grid-template-rows: 1fr auto auto;
     height: 100%;
 }
 
-
 div.modalSessionsList {
     position: fixed;
     top: 0;