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 && (