From f5b98aa12d0f9f54154b06d04488643e131701b2 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 1 Apr 2026 11:51:06 +0100
Subject: [PATCH] fix: stabilize flaky visual stories (#23893)

---
 site/src/components/Calendar/Calendar.stories.tsx       | 8 ++++++++
 site/src/pages/AgentsPage/AgentChatPageView.stories.tsx | 6 ++++++
 2 files changed, 14 insertions(+)

diff --git a/site/src/components/Calendar/Calendar.stories.tsx b/site/src/components/Calendar/Calendar.stories.tsx
index 7609d20b11..20fc62d699 100644
--- a/site/src/components/Calendar/Calendar.stories.tsx
+++ b/site/src/components/Calendar/Calendar.stories.tsx
@@ -6,6 +6,9 @@ import { Calendar } from "./Calendar";
 const meta: Meta<typeof Calendar> = {
 	title: "components/Calendar",
 	component: Calendar,
+	args: {
+		today: new Date("2025-03-15"),
+	},
 	decorators: [
 		(Story) => (
 			<div className="rounded-lg border border-solid border-border-default w-fit">
@@ -21,6 +24,7 @@ type Story = StoryObj<typeof Calendar>;
 export const Single: Story = {
 	args: {
 		mode: "single",
+		defaultMonth: new Date("2025-03-15"),
 		selected: new Date("2025-03-15"),
 	},
 };
@@ -34,6 +38,8 @@ export const Range: Story = {
 		return (
 			<Calendar
 				mode="range"
+				today={new Date("2025-03-15")}
+				defaultMonth={new Date("2025-03-10")}
 				selected={range}
 				onSelect={(r) => r && setRange(r)}
 				numberOfMonths={2}
@@ -45,6 +51,7 @@ export const Range: Story = {
 export const TwoMonths: Story = {
 	args: {
 		mode: "single",
+		defaultMonth: new Date("2025-03-15"),
 		numberOfMonths: 2,
 		selected: new Date("2025-03-15"),
 	},
@@ -53,6 +60,7 @@ export const TwoMonths: Story = {
 export const DisabledFutureDates: Story = {
 	args: {
 		mode: "single",
+		defaultMonth: new Date("2025-03-15"),
 		selected: new Date("2025-03-15"),
 		disabled: { after: new Date("2025-03-20") },
 	},
diff --git a/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx b/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx
index cf8bbded47..23fa18c608 100644
--- a/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx
+++ b/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx
@@ -554,6 +554,7 @@ const getStoreMessages = (
 /** Scroll-to-bottom button appears after scrolling up in a long
  *  conversation, and clicking it returns to the bottom. */
 export const ScrollToBottomButton: Story = {
+	parameters: { chromatic: { disableSnapshot: true } },
 	decorators: scrollStoryDecorators,
 	render: () => (
 		<StoryAgentChatPageView
@@ -623,6 +624,7 @@ const preservedScrollStore = buildStoreWithMessages(buildLongConversation(30));
 
 /** When scrolled away from bottom, new content preserves scroll position. */
 export const ScrollPositionPreservedOnNewContent: Story = {
+	parameters: { chromatic: { disableSnapshot: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={preservedScrollStore} />,
 	play: async ({ canvasElement }) => {
@@ -705,6 +707,7 @@ const pinnedScrollStore = buildStoreWithMessages(buildLongConversation(30));
 
 /** When at bottom, new content keeps the user pinned to bottom. */
 export const ScrollPinnedToBottomOnNewContent: Story = {
+	parameters: { chromatic: { disableSnapshot: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={pinnedScrollStore} />,
 	play: async ({ canvasElement }) => {
@@ -780,6 +783,7 @@ const touchGuardScrollStore = buildStoreWithMessages(buildLongConversation(30));
 /** During an active touch gesture, the container ResizeObserver must not
  *  snap scroll to bottom. This prevents the mobile URL bar resize jump. */
 export const ScrollNotJumpedDuringTouch: Story = {
+	parameters: { chromatic: { disableSnapshot: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={touchGuardScrollStore} />,
 	play: async ({ canvasElement }) => {
@@ -875,6 +879,7 @@ const wheelGuardScrollStore = buildStoreWithMessages(buildLongConversation(30));
 /** During active wheel/trackpad scrolling, the container ResizeObserver
  *  must not snap scroll to bottom. This prevents desktop scroll jump. */
 export const ScrollNotJumpedDuringWheel: Story = {
+	parameters: { chromatic: { disableSnapshot: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={wheelGuardScrollStore} />,
 	play: async ({ canvasElement }) => {
@@ -964,6 +969,7 @@ const wheelDeferredStore = buildStoreWithMessages(buildLongConversation(30));
  * stuck in a jumped-up position.
  */
 export const ScrollRepinnedAfterWheelDeferredAppend: Story = {
+	parameters: { chromatic: { disableSnapshot: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={wheelDeferredStore} />,
 	play: async ({ canvasElement }) => {