From 110c67f0835c10264317e87a2ba14b81e115e34d Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Tue, 22 Oct 2024 14:24:28 -0700
Subject: [PATCH] Improve agent pill, detail card styling. Handle null
 chatInputRef

- Remove border from agent detail hover card on home page
- Do not wrap long agent names in agent pills on home page
- Handle scenario where chatInputRef is null
---
 .../web/app/components/chatInputArea/chatInputArea.tsx        | 2 +-
 src/interface/web/app/page.tsx                                | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 6cb88ca0..88726bc4 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -256,7 +256,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
 
     const chatInputRef = ref as React.MutableRefObject<HTMLTextAreaElement>;
     useEffect(() => {
-        if (!chatInputRef.current) return;
+        if (!chatInputRef?.current) return;
         chatInputRef.current.style.height = "auto";
         chatInputRef.current.style.height =
             Math.max(chatInputRef.current.scrollHeight - 24, 64) + "px";
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index 07dbd529..d0004ded 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -241,13 +241,13 @@ function ChatBodyData(props: ChatBodyDataProps) {
                                                 setIsPopoverOpen(false);
                                             }}
                                         >
-                                            <CardTitle className="text-center text-md font-medium flex justify-center items-center">
+                                            <CardTitle className="text-center text-md font-medium flex justify-center items-center whitespace-nowrap">
                                                 {agentIcons[index]} {agent.name}
                                             </CardTitle>
                                         </Card>
                                     </PopoverTrigger>
                                     <PopoverContent
-                                        className="w-80 p-0"
+                                        className="w-80 p-0 border-none bg-transparent shadow-none"
                                         onMouseLeave={() => {
                                             setHoveredAgent(null);
                                             setIsPopoverOpen(false);