Docs: Add small viewport stories for Preview and Source blocks

[TheSeydiCharyyev]

Adds small viewport (320px) stories for Preview and Source doc block components, to improve Chromatic visual regression testing at narrow widths.

This was suggested by @Sidnioulz in #33961 (comment).

Changes made:

• "Preview.stories.tsx": Added "SingleSmallViewport" and "CodeExpandedSmallViewport" stories
• "Source.stories.tsx": Added "JSXSmallViewport" story

All stories wrap the component in a 320px container and set "chromatic: {viewports: [320]}" for visual snapshot testing.

Checklist

• Stories added
• Linter passes (0 errors)

Summary by CodeRabbit

• Tests
  • Added new small viewport test stories for component preview and source documentation, ensuring proper rendering at 320px width for mobile-sized screens.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c4d647b and 4ed8458.

📒 Files selected for processing (2)

• code/addons/docs/src/blocks/components/Preview.stories.tsx
• code/addons/docs/src/blocks/components/Source.stories.tsx

---

📝 Walkthrough

Walkthrough

Adds three new small-viewport story variants across two component story files. Each story renders a component within a 320px-wide container and applies Chromatic viewport configuration, creating visual regression test cases for responsive behavior.

Changes

Cohort / File(s)	Summary
Small Viewport Story Variants code/addons/docs/src/blocks/components/Preview.stories.tsx, code/addons/docs/src/blocks/components/Source.stories.tsx	Added three new stories (SingleSmallViewport, CodeExpandedSmallViewport, JSXSmallViewport) that test components at 320px viewport width. Each reuses existing story args, configures Chromatic viewports to [320], and wraps components in fixed-width containers for small-screen visual testing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Sidnioulz]

Thanks! I'll merge after CI goes green. Do watch out for CircleCI failures; nx failures can be ignored.