bug: agentapi chat UI has insufficient minimum width causing text to wrap

[blinkagent[bot]]

Problem

The agentapi chat interface in the sidebar has insufficient minimum width, causing chat messages to wrap and be cut off visually. This affects the UI appearance, especially when taking screenshots for marketing purposes.

Current Behavior

Chat messages in the agentapi UI wrap awkwardly due to constrained width in the sidebar.

Expected Behavior

The chat interface should have adequate minimum width to display messages without wrapping, or implement proper responsive wrapping behavior.

Background

This was previously addressed in PR #18230 (June 2025) which widened the sidebar to prevent line wrapping. However, the issue appears to have been reintroduced, suggesting that the temporary fix may have been reverted or the layout has changed.

Related

• Fixed previously in #18230

[github-actions[bot]]

Task created: https://dev.coder.com/tasks/david-fraley/df58054b-6470-4e59-8df9-fb3501d0cfb6

[david-fraley]

Hi! I'm a Coder Task investigating this issue. Here's what I found:

Root Cause

The truncation issue was introduced in PR #20918 when switching from task.name to task.display_name. The change added a hardcoded max-w-[220px] constraint to the span element in TasksSidebar.tsx:206:

<span className="block max-w-[220px] truncate">
  {task.display_name}
</span>

This 220px limit is too restrictive. While the sidebar has a fixed width of 256px (w-64) from PR #18230, the hardcoded max-width prevents the text from using the naturally available space within the flex container.

Proposed Solution

Remove the hardcoded max-w-[220px] constraint and let the flex layout naturally calculate available space:

<span className="truncate">
  {task.display_name}
</span>

Changes:

• Remove block class (not needed in flex container)
• Remove max-w-[220px] (arbitrary constraint causing issue)
• Keep truncate class (still needed for genuine overflow cases)

This allows display names to use all available space in the sidebar (approximately 220-230px after accounting for status icon, padding, and dropdown button) before truncating, while maintaining the fixed sidebar width.

Next Steps

I've written a detailed implementation plan in PLAN.md and am ready to implement the fix once approved. This is a low-risk, single-line CSS change that will be validated through existing Storybook stories.

[david-fraley]

Root Cause Analysis

Hi! I'm a Coder Task investigating this issue.

I've identified the root cause of the unnecessary truncation:

The Problem: PR #20918 introduced a hardcoded max-w-[220px] constraint on the task display name span in site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx:206. This is causing the text to truncate even when there's available space in the sidebar.

// Current code (line 206):
<span className="block max-w-[220px] truncate">
  {task.display_name}
</span>

Why this happened: When switching from task.name to task.display_name, the 220px limit was added, but this is too restrictive given:

• The sidebar has a fixed width of w-64 (256px) from PR #18230
• After accounting for status icon, padding, and dropdown menu button, there's more than 220px available for text
• The hardcoded limit prevents the text from using naturally available space

Proposed Solution

Remove the hardcoded max-w-[220px] constraint and rely on the flex container's natural layout:

// Proposed fix:
<span className="truncate">
  {task.display_name}
</span>

Why this works:

• The parent flex container already handles spacing correctly with flex items-center gap-2
• The sidebar width is fixed at 256px, so it won't expand
• The truncate class still handles genuine overflow cases
• The text will naturally use all available flex space before truncating

This is a minimal, low-risk change that removes an arbitrary constraint and lets CSS flexbox handle the layout naturally.

I've written a detailed implementation plan to PLAN.md and am ready to implement once approved.