fix(copilot): fix sent message width (#1904)

This commit is contained in:
Siddharth Ganesan
2025-11-11 15:34:08 -08:00
committed by GitHub
parent 77d897da85
commit 77ba4d106f
3 changed files with 10 additions and 8 deletions
@@ -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}
@@ -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}
@@ -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] ${