fix(site/src/pages/AgentsPage): prevent narrow chat input overlap

site/src/pages/AgentsPage/AgentChatPageView.stories.tsx

@@ -400,6 +400,33 @@ index abc1234..def5678 100644
 	},
 };
 
+export const NarrowWithSidebarPanel: Story = {
+	render: () => <StoryAgentChatPageView showSidebarPanel />,
+	decorators: [
+		(Story) => (
+			<div style={{ height: "100vh", overflow: "hidden", width: 720 }}>
+				<Story />
+			</div>
+		),
+	],
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const chatPanel = await canvas.findByTestId("agents-chat-panel");
+		const composer = await canvas.findByTestId("chat-composer");
+		const sendButton = canvas.getByRole("button", { name: "Send" });
+
+		await waitFor(() => {
+			const chatPanelRect = chatPanel.getBoundingClientRect();
+			const composerRect = composer.getBoundingClientRect();
+			const sendButtonRect = sendButton.getBoundingClientRect();
+
+			expect(chatPanelRect.width).toBeGreaterThanOrEqual(360);
+			expect(sendButtonRect.left).toBeGreaterThanOrEqual(composerRect.left);
+			expect(sendButtonRect.right).toBeLessThanOrEqual(composerRect.right);
+		});
+	},
+};
+
 /**
  * Clicking the refresh button in the git panel invalidates the
  * cached PR diff contents so that React Query re-fetches from

site/src/pages/AgentsPage/AgentChatPageView.tsx

@@ -451,8 +451,9 @@ export const AgentChatPageView: FC<AgentChatPageViewProps> = ({
 				>
 					{titleElement}
 					<div
+						data-testid="agents-chat-panel"
 						className={cn(
-							"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+							"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden lg:min-w-[360px]",
 							visualExpanded && "hidden",
 							shouldShowSidebar && "max-lg:hidden",
 						)}
@@ -677,7 +678,7 @@ export const AgentChatPageLoadingView: FC<AgentChatPageLoadingViewProps> = ({
 			)}
 		>
 			{titleElement}
-			<div className="relative flex h-full min-h-0 min-w-0 flex-1 flex-col">
+			<div className="relative flex h-full min-h-0 min-w-0 flex-1 flex-col lg:min-w-[360px]">
 				<ChatTopBar
 					panel={{
 						showSidebarPanel: false,

site/src/pages/AgentsPage/components/AgentChatInput.tsx

@@ -1413,7 +1413,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 							</Popover>
 						</div>
 					</div>
-					<div className="flex items-center gap-2">
+					<div className="flex shrink-0 items-center gap-2">
 						{speech.isSupported && !isStreaming && (
 							<>
 								<Button