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} + {badge.name} {badge.statusLabel} @@ -205,7 +205,7 @@ const ToolBadge: FC<{ return ( - {badge.name} + {badge.name} {onRemoveWorkspace && (