diff --git a/.changeset/six-crabs-chew.md b/.changeset/six-crabs-chew.md
new file mode 100644
index 0000000000..fa6f554a32
--- /dev/null
+++ b/.changeset/six-crabs-chew.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Added a reusable narrowViewportDecorator that constrains the story width to 400px, forcing content overflow so scroll buttons appear and applied the decorator to all "with scroll" radio widget stories.
diff --git a/packages/perseus/src/widgets/__testutils__/story-decorators.tsx b/packages/perseus/src/widgets/__testutils__/story-decorators.tsx
index ede8bf2e4d..7b2439ccf5 100644
--- a/packages/perseus/src/widgets/__testutils__/story-decorators.tsx
+++ b/packages/perseus/src/widgets/__testutils__/story-decorators.tsx
@@ -1,5 +1,7 @@
import * as React from "react";
+import type {Decorator} from "@storybook/react-vite";
+
export const mobileDecorator = (Story) => (
@@ -82,3 +84,10 @@ export const articleFloatRightDecorator = (Story) => (
{articleContent3}
);
+
+// Force overflow so the radio widget’s scroll controls render in these stories.
+export const narrowViewportDecorator: Decorator = (Story) => (
+
+
+
+);
diff --git a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx
index 956693e88d..fb244c0f55 100644
--- a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx
+++ b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
import {getFeatureFlags} from "../../../testing/feature-flags-util";
import {ServerItemRendererWithDebugUI} from "../../../testing/server-item-renderer-with-debug-ui";
+import {narrowViewportDecorator} from "../../__testutils__/story-decorators";
import {groupedRadioRationaleQuestion} from "../../graded-group/graded-group.testdata";
import {
question,
@@ -122,6 +123,7 @@ export const SelectWithImagesAndScroll = {
question: SingleSelectOverflowImageContent,
}),
},
+ decorators: [narrowViewportDecorator],
};
export const SingleSelectWithScroll = {
@@ -130,6 +132,7 @@ export const SingleSelectWithScroll = {
question: SingleSelectOverflowContent,
}),
},
+ decorators: [narrowViewportDecorator],
};
export const MultiSelectSimple = {
@@ -154,6 +157,7 @@ export const MultiSelectWithScroll = {
question: multiChoiceQuestionSimpleOverflowContent,
}),
},
+ decorators: [narrowViewportDecorator],
};
export const GradedGroupSetWithScroll = {
@@ -162,6 +166,7 @@ export const GradedGroupSetWithScroll = {
question: overflowContentInGradedGroupSet,
}),
},
+ decorators: [narrowViewportDecorator],
};
export const GradedGroup = {
diff --git a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx
index d99cdc8336..4cf6294c72 100644
--- a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx
+++ b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx
@@ -12,6 +12,7 @@ import {ApiOptions} from "../../../perseus-api";
import {ServerItemRenderer} from "../../../server-item-renderer";
import {getFeatureFlags} from "../../../testing/feature-flags-util";
import {testDependenciesV2} from "../../../testing/test-dependencies";
+import {narrowViewportDecorator} from "../../__testutils__/story-decorators";
import {
choicesWithGraphie,
choicesWithImages,
@@ -155,6 +156,7 @@ export const SingleSelectWithImagesAndScroll: Story = {
}),
}),
},
+ decorators: [narrowViewportDecorator],
};
export const SingleSelectWithLongMathjax: Story = {
@@ -329,6 +331,7 @@ export const MultiSelectWithImagesAndScroll: Story = {
}),
}),
},
+ decorators: [narrowViewportDecorator],
};
export const MultiSelectWithLongText: Story = {
@@ -363,6 +366,7 @@ export const GradedGroupSetWithScroll: Story = {
question: overflowContentInGradedGroupSet,
}),
},
+ decorators: [narrowViewportDecorator],
};
function RadioQuestionRenderer(props: {