From 25bdf45a9949320577c186183b939fb3fbbff72d Mon Sep 17 00:00:00 2001 From: Maks Pikov Date: Fri, 27 Feb 2026 22:27:56 +0000 Subject: [PATCH] fix(docs): add paddingLeft to OcticonHeaders so anchor icon is not clipped The docs heading anchor link (OcticonAnchor) uses float:left with marginLeft:-24px to position itself to the left of the heading text. Without paddingLeft on the heading itself, this negative-margin float extends outside the element's content box, causing the icon to be clipped by the parent container in the light theme. Adding paddingLeft:'24px' to OcticonHeaders creates the space the floating anchor needs to be fully visible, mirroring the approach used by GitHub's Markdown heading anchors. Closes #31505 --- code/addons/docs/src/blocks/blocks/mdx.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/addons/docs/src/blocks/blocks/mdx.tsx b/code/addons/docs/src/blocks/blocks/mdx.tsx index c54fc07ced62..5eed6c6040bb 100644 --- a/code/addons/docs/src/blocks/blocks/mdx.tsx +++ b/code/addons/docs/src/blocks/blocks/mdx.tsx @@ -144,6 +144,9 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce( (acc, headerType) => ({ ...acc, [headerType]: styled(headerType)({ + // Reserve space for the floating anchor icon (which has marginLeft: '-24px') + // so it is visible in both light and dark themes without being clipped. + paddingLeft: '24px', '& svg': { position: 'relative', top: '-0.1em',