[Radio] Added a reusable narrowViewportDecorator that constrains forcing content overflow so scroll buttons appear

.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.

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) => (
     <div className="framework-perseus perseus-mobile">
         <Story />
@@ -82,3 +84,10 @@ export const articleFloatRightDecorator = (Story) => (
         <div className="paragraph">{articleContent3}</div>
     </div>
 );
+
+// Force overflow so the radio widget’s scroll controls render in these stories.
+export const narrowViewportDecorator: Decorator = (Story) => (
+    <div style={{maxWidth: "400px"}}>
+        <Story />
+    </div>
+);

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 = {

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: {