diff --git a/code/addons/docs/src/blocks/components/Preview.stories.tsx b/code/addons/docs/src/blocks/components/Preview.stories.tsx
index 223efabeee51..b2f3b5ceff5f 100644
--- a/code/addons/docs/src/blocks/components/Preview.stories.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.stories.tsx
@@ -340,3 +340,29 @@ export const WithAdditionalActions = () => (
     </Button>
   </Preview>
 );
+
+export const SingleSmallViewport = () => (
+  <div style={{ width: 320 }}>
+    <Preview inline>
+      <Button ariaLabel={false} variant="outline">
+        Button 1
+      </Button>
+    </Preview>
+  </div>
+);
+SingleSmallViewport.parameters = {
+  chromatic: { viewports: [320] },
+};
+
+export const CodeExpandedSmallViewport = () => (
+  <div style={{ width: 320 }}>
+    <Preview inline isExpanded withSource={sourceStories.JSX.args}>
+      <Button ariaLabel={false} variant="outline">
+        Button 1
+      </Button>
+    </Preview>
+  </div>
+);
+CodeExpandedSmallViewport.parameters = {
+  chromatic: { viewports: [320] },
+};
diff --git a/code/addons/docs/src/blocks/components/Source.stories.tsx b/code/addons/docs/src/blocks/components/Source.stories.tsx
index ff323b300e70..e2d823fb2a15 100644
--- a/code/addons/docs/src/blocks/components/Source.stories.tsx
+++ b/code/addons/docs/src/blocks/components/Source.stories.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Source, SourceError } from './Source';
@@ -75,3 +77,17 @@ export const SourceUnavailable: Story = {
     format: false,
   },
 };
+
+export const JSXSmallViewport: Story = {
+  args: {
+    ...JSX.args,
+  },
+  parameters: {
+    chromatic: { viewports: [320] },
+  },
+  render: (args) => (
+    <div style={{ width: 320 }}>
+      <Source {...args} />
+    </div>
+  ),
+};