From 57859b25e0a51ebe838de5a6ebbf000d4dc75e6f Mon Sep 17 00:00:00 2001
From: Saumya <saumyadas2017@gmail.com>
Date: Sun, 10 Aug 2025 22:05:05 +0530
Subject: [PATCH] fix: fix tool call panel and stuff proportions

---
 .../[projectId]/thread/[threadId]/page.tsx    |  6 ++--
 .../thread/_components/ThreadLayout.tsx       |  2 +-
 frontend/src/app/share/[threadId]/page.tsx    |  2 +-
 .../thread/chat-input/chat-input.tsx          | 29 ++++---------------
 .../thread/content/ThreadContent.tsx          |  2 +-
 .../thread/content/ThreadSkeleton.tsx         |  6 ++--
 .../thread/tool-call-side-panel.tsx           |  2 +-
 .../components/workflows/workflow-builder.tsx |  2 +-
 .../components/workflows/workflow-layout.tsx  |  2 +-
 9 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/frontend/src/app/(dashboard)/projects/[projectId]/thread/[threadId]/page.tsx b/frontend/src/app/(dashboard)/projects/[projectId]/thread/[threadId]/page.tsx
index 1802b5f6..66fa8662 100644
--- a/frontend/src/app/(dashboard)/projects/[projectId]/thread/[threadId]/page.tsx
+++ b/frontend/src/app/(dashboard)/projects/[projectId]/thread/[threadId]/page.tsx
@@ -731,12 +731,12 @@ export default function ThreadPage({
             "fixed bottom-0 z-10 bg-gradient-to-t from-background via-background/90 to-transparent px-4 pt-8",
             isSidePanelAnimating ? "" : "transition-all duration-200 ease-in-out",
             leftSidebarState === 'expanded' ? 'left-[72px] md:left-[256px]' : 'left-[72px]',
-            isSidePanelOpen ? 'right-[90%] sm:right-[450px] md:right-[500px] lg:right-[550px] xl:right-[650px]' : 'right-0',
-            isMobile ? 'left-0 right-0' : ''
+            isSidePanelOpen ? (isMobile ? 'right-[90%]' : 'right-[50vw]') : 'right-0',
+            isMobile ? 'left-0' : ''
           )}>
           <div className={cn(
             "mx-auto",
-            isMobile ? "w-full" : "max-w-3xl"
+            isMobile ? "w-full" : "max-w-4xl"
           )}>
             <ChatInput
               value={newMessage}
diff --git a/frontend/src/app/(dashboard)/projects/[projectId]/thread/_components/ThreadLayout.tsx b/frontend/src/app/(dashboard)/projects/[projectId]/thread/_components/ThreadLayout.tsx
index 5f40ec8f..68c6cd4b 100644
--- a/frontend/src/app/(dashboard)/projects/[projectId]/thread/_components/ThreadLayout.tsx
+++ b/frontend/src/app/(dashboard)/projects/[projectId]/thread/_components/ThreadLayout.tsx
@@ -86,7 +86,7 @@ export function ThreadLayout({
 
       <div
         className={`flex flex-col flex-1 overflow-hidden transition-all duration-200 ease-in-out ${(!initialLoadCompleted || isSidePanelOpen)
-          ? 'mr-[90%] sm:mr-[450px] md:mr-[500px] lg:mr-[550px] xl:mr-[650px]'
+          ? isMobile ? 'mr-[90%]' : 'mr-[50vw]'
           : ''
           }`}
       >
diff --git a/frontend/src/app/share/[threadId]/page.tsx b/frontend/src/app/share/[threadId]/page.tsx
index e9692854..829cbbc1 100644
--- a/frontend/src/app/share/[threadId]/page.tsx
+++ b/frontend/src/app/share/[threadId]/page.tsx
@@ -761,7 +761,7 @@ export default function ThreadPage({
   return (
     <div className="flex h-screen">
       <div
-        className={`flex flex-col flex-1 overflow-hidden transition-all duration-200 ease-in-out ${isSidePanelOpen ? 'mr-[90%] sm:mr-[450px] md:mr-[500px] lg:mr-[550px] xl:mr-[650px]' : ''}`}
+        className={`flex flex-col flex-1 overflow-hidden transition-all duration-200 ease-in-out ${isSidePanelOpen ? 'mr-[50vw]' : ''}`}
       >
         {renderHeader()}
         <ThreadContent
diff --git a/frontend/src/components/thread/chat-input/chat-input.tsx b/frontend/src/components/thread/chat-input/chat-input.tsx
index bd6afe89..290c2515 100644
--- a/frontend/src/components/thread/chat-input/chat-input.tsx
+++ b/frontend/src/components/thread/chat-input/chat-input.tsx
@@ -369,8 +369,6 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
               }
             }}
           >
-
-
             <div className="w-full text-sm flex flex-col justify-between items-start rounded-lg">
               <CardContent className={`w-full p-1.5 pb-2 ${bgColor} border rounded-3xl`}>
                 <AttachmentGroup
@@ -420,15 +418,13 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
             </div>
           </Card>
           
-          {/* Advanced Config Section - Slides underneath chat input */}
           {enableAdvancedConfig && selectedAgentId && (
             <div className="w-full max-w-4xl mx-auto -mt-12 relative z-10">
-                              <div className="bg-muted/30 border border-border/50 rounded-b-2xl px-4 py-2 pt-8 transition-all duration-300 ease-out">
-                {/* Show all config options in a single horizontal line */}
+              <div className="bg-muted/30 border border-border/50 rounded-b-3xl px-4 py-2 pt-8 transition-all duration-300 ease-out">
                 <div className="flex items-center justify-between gap-1 overflow-x-auto scrollbar-none relative z-20">
                   <button
                     onClick={() => setRegistryDialogOpen(true)}
-                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-md hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
+                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
                   >
                     <div className="flex items-center -space-x-0.5">
                       <div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
@@ -443,42 +439,30 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
                     </div>
                     <span className="text-xs font-medium">Integrations</span>
                   </button>
-
-
-
                   <button
                     onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=instructions`)}
-                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-md hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
+                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
                   >
                     <Brain className="h-3.5 w-3.5 flex-shrink-0" />
                     <span className="text-xs font-medium">Instructions</span>
                   </button>
-
-
-
                   <button
                     onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=knowledge`)}
-                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-md hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
+                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
                   >
                     <Database className="h-3.5 w-3.5 flex-shrink-0" />
                     <span className="text-xs font-medium">Knowledge</span>
                   </button>
-
-
-
                   <button
                     onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=triggers`)}
-                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-md hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
+                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
                   >
                     <Zap className="h-3.5 w-3.5 flex-shrink-0" />
                     <span className="text-xs font-medium">Triggers</span>
                   </button>
-
-
-
                   <button
                     onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=workflows`)}
-                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-md hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
+                    className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
                   >
                     <Workflow className="h-3.5 w-3.5 flex-shrink-0" />
                     <span className="text-xs font-medium">Workflows</span>
@@ -487,7 +471,6 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
               </div>
             </div>
           )}
-
           <AgentConfigModal
             isOpen={configModalOpen}
             onOpenChange={setConfigModalOpen}
diff --git a/frontend/src/components/thread/content/ThreadContent.tsx b/frontend/src/components/thread/content/ThreadContent.tsx
index b1931a17..b8213f0b 100644
--- a/frontend/src/components/thread/content/ThreadContent.tsx
+++ b/frontend/src/components/thread/content/ThreadContent.tsx
@@ -466,7 +466,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
                     className={`${containerClassName} flex flex-col-reverse ${shouldJustifyToTop ? 'justify-end min-h-full' : ''}`}
                     onScroll={handleScroll}
                 >
-                    <div ref={contentRef} className="mx-auto max-w-3xl md:px-8 min-w-0 w-full">
+                    <div ref={contentRef} className="mx-auto max-w-4xl md:px-8 min-w-0 w-full">
                         <div className="space-y-8 min-w-0">
                             {(() => {
 
diff --git a/frontend/src/components/thread/content/ThreadSkeleton.tsx b/frontend/src/components/thread/content/ThreadSkeleton.tsx
index 59e63484..d463677f 100644
--- a/frontend/src/components/thread/content/ThreadSkeleton.tsx
+++ b/frontend/src/components/thread/content/ThreadSkeleton.tsx
@@ -50,7 +50,7 @@ export function ThreadSkeleton({
 
                 {/* Skeleton Chat Messages */}
                 <div className="flex-1 overflow-y-auto px-6 py-4 pb-72">
-                    <div className="mx-auto max-w-3xl space-y-6">
+                    <div className="mx-auto max-w-4xl space-y-6">
                         {/* Generate multiple message skeletons based on messageCount */}
                         {Array.from({ length: messageCount }).map((_, index) => (
                             <React.Fragment key={index}>
@@ -124,7 +124,7 @@ export function ThreadSkeleton({
                 >
                     <div className={cn(
                         "mx-auto",
-                        "max-w-3xl"
+                        "max-w-4xl"
                     )}>
                         <ChatInput
                             onSubmit={handleSubmit}
@@ -145,7 +145,7 @@ export function ThreadSkeleton({
 
             {/* Side Panel - Always visible in skeleton with exact responsive widths */}
             <div className="hidden sm:block">
-                <div className="h-screen w-[90%] sm:w-[450px] md:w-[500px] lg:w-[550px] xl:w-[650px] border-l">
+                <div className="h-screen w-[50vw] border-l">
                     <div className="p-4">
                         <Skeleton className="h-8 w-32 mb-4" />
                         <Skeleton className="h-20 w-full rounded-md mb-4" />
diff --git a/frontend/src/components/thread/tool-call-side-panel.tsx b/frontend/src/components/thread/tool-call-side-panel.tsx
index e4ef3bb5..7f268e56 100644
--- a/frontend/src/components/thread/tool-call-side-panel.tsx
+++ b/frontend/src/components/thread/tool-call-side-panel.tsx
@@ -727,7 +727,7 @@ export function ToolCallSidePanel({
             'fixed top-2 right-2 bottom-4 border rounded-3xl flex flex-col z-30',
             isMobile
               ? 'left-2'
-              : 'w-[40vw] sm:w-[450px] md:w-[500px] lg:w-[550px] xl:w-[645px]',
+              : 'w-[50vw]',
           )}
           style={{
             overflow: 'hidden',
diff --git a/frontend/src/components/workflows/workflow-builder.tsx b/frontend/src/components/workflows/workflow-builder.tsx
index e2718bec..b158ca1c 100644
--- a/frontend/src/components/workflows/workflow-builder.tsx
+++ b/frontend/src/components/workflows/workflow-builder.tsx
@@ -159,7 +159,7 @@ export function WorkflowBuilder({
             onToolsUpdate={onToolsUpdate}
         >
             <div className="min-h-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-                <div className="mx-auto max-w-3xl md:px-8 min-w-0 py-8">
+                <div className="mx-auto max-w-4xl md:px-8 min-w-0 py-8">
                     {editableSteps.length === 0 ? (
                         <div className="flex-1 min-h-[60vh] flex items-center justify-center">
                             <div className="text-center">
diff --git a/frontend/src/components/workflows/workflow-layout.tsx b/frontend/src/components/workflows/workflow-layout.tsx
index 48a750ee..f5d84bf0 100644
--- a/frontend/src/components/workflows/workflow-layout.tsx
+++ b/frontend/src/components/workflows/workflow-layout.tsx
@@ -62,7 +62,7 @@ export function WorkflowLayout({
         <div className="flex h-screen">
             <div
                 className={`flex flex-col flex-1 overflow-hidden transition-all duration-200 ease-in-out ${isSidePanelOpen
-                    ? 'mr-[90%] sm:mr-[450px] md:mr-[500px] lg:mr-[550px] xl:mr-[650px]'
+                    ? 'mr-[50vw]'
                     : ''
                     }`}
             >