From 8bc91d982f6df9e934355e2438f8a50e09d5d32e Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@coder.com>
Date: Thu, 16 Apr 2026 01:04:19 -0400
Subject: [PATCH] fix(site): truncate long workspace name in chat input toolbar
 (#24412)

---
 .../components/AgentChatInput.stories.tsx     | 39 +++++++++++++++++++
 .../AgentsPage/components/AgentChatInput.tsx  |  4 +-
 .../AgentsPage/components/WorkspacePill.tsx   |  7 ++--
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx
index 98244feed4..8992d7573d 100644
--- a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx
+++ b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useEffect, useRef } from "react";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import type * as TypesGen from "#/api/typesGenerated";
+import { MockWorkspace, MockWorkspaceAgent } from "#/testHelpers/entities";
 import {
 	AgentChatInput,
 	type AgentContextUsage,
@@ -728,3 +729,41 @@ export const ContextNearLimit: Story = {
 		},
 	},
 };
+
+/** Long workspace name at iPhone SE width — verifies truncation. */
+export const LongWorkspaceNameMobile: Story = {
+	args: {
+		...mcpDefaults,
+		mcpServers: [githubMCPConnected],
+		selectedMCPServerIds: [githubMCPConnected.id],
+		workspace: {
+			...MockWorkspace,
+			name: "my-super-extremely-long-workspace-name-that-overflows",
+		},
+		workspaceAgent: MockWorkspaceAgent,
+		chatId: "test-chat-id",
+	},
+	parameters: {
+		viewport: { defaultViewport: "mobile1" },
+		chromatic: { viewports: [375] },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		// The workspace pill button should be present.
+		const pill = await canvas.findByRole("button", {
+			name: /workspace menu/,
+		});
+		await waitFor(() => {
+			expect(pill).toBeVisible();
+		});
+		// The toolbar row should not cause horizontal overflow.
+		const toolbar = pill.closest(
+			".flex.items-center.justify-between",
+		) as HTMLElement;
+		if (toolbar?.parentElement) {
+			expect(toolbar.scrollWidth).toBeLessThanOrEqual(
+				toolbar.parentElement.clientWidth,
+			);
+		}
+	},
+};
diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.tsx
index 1a90b9e966..65b42a462d 100644
--- a/site/src/pages/AgentsPage/components/AgentChatInput.tsx
+++ b/site/src/pages/AgentsPage/components/AgentChatInput.tsx
@@ -193,7 +193,7 @@ const ToolBadge: FC<{
 						)}
 					>
 						{badge.statusIcon}
-						{badge.name}
+						<span className="truncate">{badge.name}</span>
 					</Link>
 				</TooltipTrigger>
 				<TooltipContent>{badge.statusLabel}</TooltipContent>
@@ -205,7 +205,7 @@ const ToolBadge: FC<{
 		return (
 			<span className={badgeCls}>
 				<MonitorIcon className="size-3" />
-				{badge.name}
+				<span className="truncate">{badge.name}</span>
 				{onRemoveWorkspace && (
 					<button
 						type="button"
diff --git a/site/src/pages/AgentsPage/components/WorkspacePill.tsx b/site/src/pages/AgentsPage/components/WorkspacePill.tsx
index 51d291dcc4..14605846d3 100644
--- a/site/src/pages/AgentsPage/components/WorkspacePill.tsx
+++ b/site/src/pages/AgentsPage/components/WorkspacePill.tsx
@@ -92,17 +92,18 @@ export const WorkspacePill: FC<WorkspacePillProps> = ({
 							type="button"
 							aria-label={`${workspace.name} workspace menu`}
 							className={cn(
-								"inline-flex shrink-0 items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs font-medium text-content-secondary",
+								"inline-flex min-w-0 max-w-[200px] items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs font-medium text-content-secondary",
 								"cursor-pointer border-0 transition-colors hover:bg-surface-tertiary hover:text-content-primary",
 							)}
 						>
-							<StatusIcon type={effectiveType} /> {workspace.name}
+							<StatusIcon type={effectiveType} />
+							<span className="truncate">{workspace.name}</span>
 							{/* The menu opens upward (side="top"), so the chevron
 							   points away from the menu when closed (default) and
 							   toward it when open (rotate-180). */}
 							<ChevronDownIcon
 								className={cn(
-									"size-3 opacity-60 transition-transform",
+									"size-3 shrink-0 opacity-60 transition-transform",
 									open && "rotate-180",
 								)}
 							/>