From 080d9dcaec50a445a5592b25f8975a97bbea8138 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <siddharthganesan@gmail.com>
Date: Tue, 11 Nov 2025 15:27:50 -0800
Subject: [PATCH] Fix copilot message width

---
 .../components/copilot-message/copilot-message.tsx   | 12 +++++++-----
 .../copilot/components/user-input/user-input.tsx     |  4 ++--
 .../panel-new/components/copilot/copilot.tsx         |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/copilot-message.tsx
index ce4615cdd5..be96ccd774 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/copilot-message.tsx
@@ -188,7 +188,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           return (
             <div
               key={`text-${index}-${block.timestamp || index}`}
-              className={`w-full max-w-full overflow-hidden pl-[2px] transition-opacity duration-200 ease-in-out ${
+              className={`w-full max-w-full overflow-hidden transition-opacity duration-200 ease-in-out ${
                 cleanBlockContent.length > 0 ? 'opacity-100' : 'opacity-70'
               } ${shouldUseSmoothing ? 'translate-y-0 transition-transform duration-100 ease-out' : ''}`}
             >
@@ -235,7 +235,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     if (isUser) {
       return (
         <div
-          className={`w-full max-w-full overflow-hidden transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
+          className={`w-full max-w-full overflow-hidden transition-opacity duration-200 [max-width:var(--panel-max-width)] ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
+          style={{ '--panel-max-width': `${panelWidth - 16}px` } as React.CSSProperties}
         >
           {isEditMode ? (
             <div
@@ -313,7 +314,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onClick={handleMessageClick}
                 onMouseEnter={() => setIsHoveringMessage(true)}
                 onMouseLeave={() => setIsHoveringMessage(false)}
-                className='group relative cursor-pointer rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-all duration-200 hover:border-[#4A4A4A] hover:bg-[#363636] dark:border-[#3D3D3D] dark:bg-[#363636] dark:hover:border-[#454545] dark:hover:bg-[#3D3D3D]'
+                className='group relative w-full cursor-pointer rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-all duration-200 hover:border-[#4A4A4A] hover:bg-[#363636] dark:border-[#3D3D3D] dark:bg-[#363636] dark:hover:border-[#454545] dark:hover:bg-[#3D3D3D]'
               >
                 <div
                   ref={messageContentRef}
@@ -439,9 +440,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     if (isAssistant) {
       return (
         <div
-          className={`w-full max-w-full overflow-hidden pl-[2px] transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
+          className={`w-full max-w-full overflow-hidden transition-opacity duration-200 [max-width:var(--panel-max-width)] ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
+          style={{ '--panel-max-width': `${panelWidth - 16}px` } as React.CSSProperties}
         >
-          <div className='max-w-full space-y-1.5 transition-all duration-200 ease-in-out'>
+          <div className='max-w-full space-y-1.5 px-[2px] transition-all duration-200 ease-in-out'>
             {/* Content blocks in chronological order */}
             {memoizedContentBlocks}
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/user-input.tsx
index 12a74de899..16187a0bbc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/user-input.tsx
@@ -563,12 +563,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         ref={setContainerRef}
         data-user-input
         className={cn('relative w-full flex-none [max-width:var(--panel-max-width)]', className)}
-        style={{ '--panel-max-width': `${panelWidth - 17}px` } as React.CSSProperties}
+        style={{ '--panel-max-width': `${panelWidth - 16}px` } as React.CSSProperties}
       >
         <div
           ref={setInputContainerRef}
           className={cn(
-            'relative rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-colors dark:bg-[#363636]',
+            'relative w-full rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-colors dark:bg-[#363636]',
             fileAttachments.isDragging && 'ring-[#33B4FF] ring-[1.75px]'
           )}
           onDragEnter={fileAttachments.handleDragEnter}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx
index 518e7eb672..74c8129f92 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx
@@ -441,7 +441,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                 <div className='relative flex-1 overflow-hidden'>
                   <div
                     ref={scrollAreaRef}
-                    className='copilot-scrollable h-full overflow-y-auto overflow-x-hidden px-[8px]'
+                    className='h-full overflow-y-auto overflow-x-hidden px-[8px]'
                   >
                     <div
                       className={`w-full max-w-full space-y-4 overflow-hidden py-[8px] ${