Skip to content

Fix right sidebar text and tool call rendering #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
2witstudios merged 3 commits into from
Jan 10, 2026
Merged

Fix right sidebar text and tool call rendering #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c087165
fix(sidebar): remove overflow-hidden that clips text in sidebar messages
claude Jan 10, 2026
82f00cd
fix(sidebar): remove overflow-hidden from TaskRenderer component
claude Jan 10, 2026
ffa9d80
fix(sidebar): constrain scroll content width to prevent horizontal ov…
claude Jan 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const CompactTextBlock: React.FC<CompactTextBlockProps> = React.memo(({

return (
<div
className={`group relative text-xs mb-1 min-w-0 max-w-full overflow-hidden ${role === 'user'
className={`group relative text-xs mb-1 min-w-0 max-w-full ${role === 'user'
? 'p-2 rounded-md bg-primary/10 dark:bg-accent/20 ml-2'
: ''
}`}
Expand All @@ -79,7 +79,7 @@ const CompactTextBlock: React.FC<CompactTextBlockProps> = React.memo(({
</div>
) : (
<>
<div className={`text-gray-900 dark:text-gray-100 prose prose-xs dark:prose-invert min-w-0 max-w-full overflow-hidden ${styles.compactProseContent}`}>
<div className={`text-gray-900 dark:text-gray-100 prose prose-xs dark:prose-invert min-w-0 max-w-full break-words ${styles.compactProseContent}`}>
<StreamingMarkdown content={content} id={`${messageId}-text`} isStreaming={isStreaming} />
</div>
{/* Always show footer with buttons; timestamp only when createdAt exists */}
Expand Down Expand Up @@ -338,7 +338,7 @@ export const CompactMessageRenderer: React.FC<CompactMessageRendererProps> = Rea

return (
<>
<div key={message.id} className="mb-1 min-w-0 max-w-full overflow-hidden" style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 80px' }}>
<div key={message.id} className="mb-1 min-w-0 max-w-full" style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 80px' }}>
{groupedParts.map((group, index) => {
if (isTextGroupPart(group)) {
const isLastTextBlock = index === groupedParts.length - 1;
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const TextBlock: React.FC<TextBlockProps> = React.memo(({
/>
) : (
<>
<div className="text-gray-900 dark:text-gray-100 prose prose-sm dark:prose-invert max-w-full overflow-hidden prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800">
<div className="text-gray-900 dark:text-gray-100 prose prose-sm dark:prose-invert max-w-full prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800">
<div className="break-words overflow-wrap-anywhere">
<StreamingMarkdown content={content} id={`${messageId}-text`} isStreaming={isStreaming} />
</div>
Expand Down
12 changes: 6 additions & 6 deletions apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,9 +247,9 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
if (!isExpanded) return null;

return (
<div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full overflow-hidden">
<div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full break-words">
{input ? (
<div className="space-y-0.5 max-w-full overflow-hidden">
<div className="space-y-0.5 max-w-full break-words">
<div className="font-medium text-gray-600 dark:text-gray-400">Input:</div>
<pre className="text-gray-500 dark:text-gray-500 overflow-x-auto whitespace-pre-wrap break-all max-w-full">
{JSON.stringify(typeof input === 'string' ? JSON.parse(input) : input, null, 2)}
Expand All @@ -258,7 +258,7 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
) : null}

{output ? (
<div className="space-y-0.5 max-w-full overflow-hidden">
<div className="space-y-0.5 max-w-full break-words">
<div className="font-medium text-gray-600 dark:text-gray-400">Result:</div>
{(() => {
try {
Expand Down Expand Up @@ -311,7 +311,7 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
) : null}

{error ? (
<div className="p-1 bg-red-50 dark:bg-red-900/20 rounded max-w-full overflow-hidden">
<div className="p-1 bg-red-50 dark:bg-red-900/20 rounded max-w-full break-words">
<div className="text-red-600 dark:text-red-400 break-words">{error}</div>
</div>
) : null}
Expand All @@ -320,10 +320,10 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
};

return (
<div className="py-0.5 text-[11px] max-w-full overflow-hidden">
<div className="py-0.5 text-[11px] max-w-full">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full overflow-hidden"
className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full"
>
{isExpanded ? <ChevronDown className="h-3 w-3 flex-shrink-0" /> : <ChevronRight className="h-3 w-3 flex-shrink-0" />}
<div className="flex-shrink-0">{getToolIcon(toolName)}</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/ai/shared/chat/tool-calls/TaskRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,10 +168,10 @@ export const TaskRenderer: React.FC<TaskRendererProps> = ({ part }) => {
const isLoading = state === 'input-streaming' || state === 'streaming' || state === 'input-available';

return (
<div className="py-0.5 text-[11px] max-w-full overflow-hidden">
<div className="py-0.5 text-[11px] max-w-full">
<button
onClick={() => !isLoading && setIsOpen(!isOpen)}
className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full overflow-hidden"
className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full"
disabled={isLoading}
aria-expanded={isOpen}
aria-label="Task management details"
Expand All @@ -190,7 +190,7 @@ export const TaskRenderer: React.FC<TaskRendererProps> = ({ part }) => {
</button>

{isOpen && !isLoading && (
<div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full overflow-hidden">
<div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full break-words">
{/* Error state */}
{(state === 'output-error' || !parsedOutput?.success) && (
<div className="text-red-600 dark:text-red-400">
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,8 +601,9 @@ const SidebarChatTab: React.FC = () => {

{/* Messages */}
<div className="flex-1 min-h-0 min-w-0 overflow-hidden" style={{ contain: 'layout' }}>
<ScrollArea className="h-full p-3" ref={scrollAreaRef}>
<div className="space-y-1.5 min-w-0">
<ScrollArea className="h-full" ref={scrollAreaRef}>
<div className="p-3 min-w-0 overflow-x-hidden">
<div className="space-y-1.5 min-w-0 max-w-full break-words">
{displayMessages.length === 0 ? (
<div className="flex items-center justify-center h-20 text-muted-foreground text-xs text-center">
<div>
Expand Down Expand Up @@ -640,6 +641,7 @@ const SidebarChatTab: React.FC = () => {
)}

<div ref={messagesEndRef} />
</div>
</div>
</ScrollArea>
</div>
Expand Down