Addon Docs: DocsContent not filling available width when TOC is enabled

[k-utsumi]

What I did

Added flex: 1 to DocsContent in code/addons/docs/src/blocks/components/DocsPage.tsx.

Before	After

Why

• DocsWrapper uses display: flex; flex-direction: row-reverse
• The TOC (Nav) is position: fixed, so it's removed from the flex flow
• DocsContent was the only in-flow flex item, but without flex: 1 it shrank to its content width
• This caused the TOC to anchor at the viewport edge with no left padding

Adding flex: 1 makes DocsContent fill the wrapper width, which corrects the TOC positioning.

Reproduced with a fresh create-next-app + storybook@10 init project with docs: { toc: true } in preview config.

Manual testing

1. Create a new Storybook project (npx storybook@latest init)
2. Enable TOC in .storybook/preview.ts: parameters: { docs: { toc: true } }
3. Open any Docs page — the TOC should appear with proper spacing from the right edge

---

AI assisted (Claude) in drafting this PR.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e41a0e71-0d4e-4885-846b-cd99e54695f1

📥 Commits

Reviewing files that changed from the base of the PR and between 9040e16 and 21b876e.

📒 Files selected for processing (1)

• code/addons/docs/src/blocks/components/DocsPage.tsx

---

📝 Walkthrough

Walkthrough

The DocsPage component's DocsContent styled component receives a flex: 1 style update, enabling it to expand flexibly within its parent container's layout rather than maintaining fixed or intrinsic sizing.

Changes

DocsContent Layout Fix

Layer / File(s)	Summary
DocsContent flex layout code/addons/docs/src/blocks/components/DocsPage.tsx	The DocsContent styled component root container adds flex: 1 to permit flexible layout expansion within its wrapper.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

---

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