From e9567741eb1890b6587dde44ac3e9667c8bd4950 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 14 Jul 2024 00:55:24 +0530
Subject: [PATCH] Improve mobile friendly styling of chat session side panel

---
 .../app/components/sidePanel/chatHistorySidePanel.tsx | 11 +++--------
 .../web/app/components/sidePanel/sidePanel.module.css |  6 ++++--
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index 0e94f8f1..6d6d3d5d 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -72,9 +72,8 @@ import {
 
 import { Pencil, Trash, Share } from "@phosphor-icons/react";
 
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
 import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
@@ -141,7 +140,6 @@ function deleteConversation(conversationId: string) {
         });
 }
 
-
 interface FilesMenuProps {
     conversationId: string | null;
     uploadedFiles: string[];
@@ -555,7 +553,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
                     <DialogTitle>All Conversations</DialogTitle>
                     <DialogDescription
                         className="p-0">
-                        <ScrollArea className="h-[500px] p-4">
+                        <ScrollArea className="h-[500px] py-4">
                             {data && Object.keys(data).map((timeGrouping) => (
                                 <div key={timeGrouping}>
                                     <div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
@@ -655,18 +653,15 @@ interface SidePanelProps {
 
 
 export default function SidePanel(props: SidePanelProps) {
-
     const [data, setData] = useState<ChatHistory[] | null>(null);
     const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
     const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
     const [enabled, setEnabled] = useState(false);
+    const [isMobileWidth, setIsMobileWidth] = useState(false);
 
     const authenticatedData = useAuthenticatedData();
     const { data: chatSessions } = useChatSessionsFetchRequest(authenticatedData ? `/api/chat/sessions` : '');
 
-
-    const [isMobileWidth, setIsMobileWidth] = useState(false);
-
     useEffect(() => {
         if (chatSessions) {
             setData(chatSessions);
diff --git a/src/interface/web/app/components/sidePanel/sidePanel.module.css b/src/interface/web/app/components/sidePanel/sidePanel.module.css
index ed03f94c..fc6918c0 100644
--- a/src/interface/web/app/components/sidePanel/sidePanel.module.css
+++ b/src/interface/web/app/components/sidePanel/sidePanel.module.css
@@ -6,7 +6,8 @@ div.session {
     max-width: 14rem;
     font-size: medium;
     display: grid;
-    grid-template-columns: minmax(auto, 350px) 1fr;
+    grid-template-columns: minmax(auto, 400px) 1fr;
+    gap: 1rem;
 }
 
 div.compressed {
@@ -83,6 +84,7 @@ div.profile {
 
 div.panelWrapper {
     display: grid;
+    padding: 0 1rem;
     grid-template-rows: auto 1fr auto auto;
     height: 100%;
 }
@@ -142,6 +144,6 @@ div.modalSessionsList div.session {
 
     div.session {
         max-width: 100%;
-        grid-template-columns: 200px 1fr;
+        grid-template-columns: minmax(auto, 70vw) 1fr;
     }
 }