Docs: add paddingLeft to OcticonHeaders so anchor icon is not clipped in light theme

[mixelburg]

Closes #31505

What I did

When the docs addon renders headings with anchor icons (OcticonAnchor), the anchor is positioned using float: left with marginLeft: '-24px'. This negative-margin approach requires the heading itself to have at least 24px of left padding so the floating icon has room to appear without being clipped by the parent container.

In the light theme the heading had no left padding, so the icon was cut off. The dark theme happened to have extra left space from a parent container, which masked the bug.

The fix adds paddingLeft: '24px' to the OcticonHeaders styled components (the same approach used by GitHub's Markdown heading anchors).

Before (light theme): anchor icon cut off on the left side
After (light theme): anchor icon fully visible, matching dark-theme behaviour

Summary by CodeRabbit

• Bug Fixes
  • Fixed header styling in documentation blocks to properly display anchor icons without clipping in both light and dark themes.

[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 f73e0fe and 25bdf45.

📒 Files selected for processing (1)

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

---

📝 Walkthrough

Walkthrough

A styling adjustment added left padding to OcticonHeaders in the MDX documentation blocks. This reserves space for a floating anchor icon to prevent visual clipping without modifying any functional logic or control flow.

Changes

Cohort / File(s)	Summary
Header Styling Update code/addons/docs/src/blocks/blocks/mdx.tsx	Added paddingLeft: '24px' to OcticonHeaders styling across header types with comments to reserve space for the floating anchor icon.

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

[storybook-app-bot]

Package Benchmarks

^{Commit: 25bdf45, ran on 2 March 2026 at 13:51:03 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	49	49	0
Self size	20.19 MB	20.42 MB	🚨 +228 KB 🚨
Dependency size	16.52 MB	16.52 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	779 KB	779 KB	0 B
Dependency size	67.37 MB	67.60 MB	🚨 +228 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	32 KB	32 KB	🎉 -36 B 🎉
Dependency size	65.89 MB	66.12 MB	🚨 +228 KB 🚨
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	50	50	0
Self size	1.04 MB	1.04 MB	0 B
Dependency size	36.71 MB	36.94 MB	🚨 +228 KB 🚨
Bundle Size Analyzer	node	node

[Sidnioulz]

Thanks for the PR!

Unfortunately, it has very visible side effects. All heading text gets moved to the right, and is no longer aligned to the content.

For this bug, we'll want to fix the underlying CSS conflict issue described in the GitHub issue instead of changing text alignment.

Please make sure to test your changes in the Storybook UI with yarn task compile && yarn storybook:ui prior to pushing changes. Please also make sure to correctly fill in the "Manual testing" part of the PR template going forward.

[Sidnioulz]

@mixelburg FYI I could not reproduce the original issue in #28259.

If you are able to reproduce it, could you please provide a link to a reproduction repository? This would be very helpful. We also have a fix by Claude that looks reasonably smart to me but we need a repro case to validate it.

Thanks,

[Sidnioulz]

Closing this in favour of the approach at #34015 which handles the CSS ordering more robustly. I wasn't able to provide a repro case and the paddingLeft fix has the side-effect of shifting all heading text. Thanks for the review @Sidnioulz!

Thanks for checking if you could repro!