Docs: Prevent heading anchor cutoff on docs pages

[Copilot]

Closes #31505

What I did

• Fixed docs heading anchor clipping on narrow viewports by increasing horizontal padding in the docs container.
• Updated DocsWrapper padding from 4rem 20px to 4rem 40px in:
  • /home/runner/work/storybook/storybook/code/addons/docs/src/blocks/components/DocsPage.tsx
• Reduced size of anchor button and padding to fit within 40px

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run Storybook for this repository.
2. Open a docs page that renders headings with anchor links (for example a page with ## Controls).
3. Resize to a narrow viewport width.
4. Verify the heading anchor icon is fully visible and not cut off on the left edge.
5. Compare light and dark themes and confirm consistent anchor visibility.
6. Confirm normal docs layout spacing still looks correct after the padding update.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Refactor
  • Redesigned heading anchor rendering for more consistent alignment and hover reveal behavior
• Style
  • Improved heading anchor spacing and vertical centering
  • Increased horizontal padding in documentation pages for better visual breathing room

[storybook-app-bot]

Package Benchmarks

^{Commit: 2fcce09, ran on 28 May 2026 at 19:23:20 UTC}

No significant changes detected, all good. 👏

[Sidnioulz]

Add a story for DocsPage that shows the behaviour of the page with a narrow viewport; the narrow viewport must also be configured for Chromatic so we get VRT.

[Sidnioulz]

Reduce the padding right of the anchor from 10px to 8px, and make sure the anchor uses small padding / small size if it uses the Button component

[Copilot]

Pull request overview

Adjusts docs page padding and heading anchor spacing so the anchor icon isn't clipped on narrow viewports.

Changes:

• Increase DocsWrapper horizontal padding from 20px to 40px.
• Reduce OcticonAnchorWrapper paddingRight from 10px to 8px.
• Add padding="small" to the heading anchor Button for more compact spacing.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
code/addons/docs/src/blocks/components/DocsPage.tsx	Bumps DocsWrapper horizontal padding to prevent anchor cutoff.
code/addons/docs/src/blocks/blocks/mdx.tsx	Tightens anchor wrapper padding and uses compact button spacing.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 0

[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: 824e82ee-d8ad-4f72-971b-f71729567fa8

📥 Commits

Reviewing files that changed from the base of the PR and between 5f2975f and 7509038.

📒 Files selected for processing (1)

• code/addons/docs/src/blocks/blocks/mdx.tsx

---

📝 Walkthrough

Walkthrough

Refactors MDX heading anchor alignment/styling and reorders the octicon/button markup; adds a small HeaderTitle. Increases DocsWrapper horizontal padding from 20px to 40px.

Changes

Docs spacing refinements

Layer / File(s)	Summary
MDX heading anchor layout and spacing code/addons/docs/src/blocks/blocks/mdx.tsx	Introduces OcticonAlignmentWrapper, changes OcticonAnchorWrapper vertical centering/spacing, adds HeaderTitle span, and reworks HeaderWithOcticonAnchor JSX (octicon/button wrapped then children rendered).
DocsWrapper horizontal padding update code/addons/docs/src/blocks/components/DocsPage.tsx	DocsWrapper padding changed from 4rem 20px to 4rem 40px.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• storybookjs/storybook#34368: Modifies code/addons/docs/src/blocks/blocks/mdx.tsx around the MDX heading anchor/octicon wrapper and the heading URL copy control.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[coderabbitai]

Actionable comments posted: 0

[coderabbitai]

Actionable comments posted: 0

I am sidnioulz