From 3c7e8f32b9617d694173d9e7bb8080eae3f6ccf5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 28 May 2026 08:42:41 +0000
Subject: [PATCH 1/6] Initial plan


From f57a0358b4dd0fc4ab0d3f38499b087f3f754108 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 28 May 2026 08:46:11 +0000
Subject: [PATCH 2/6] Add 40px horizontal padding to DocsWrapper to prevent
 anchor link cutoff

Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com>
---
 code/core/src/manager/globals/exports.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/core/src/manager/globals/exports.ts b/code/core/src/manager/globals/exports.ts
index 1836eedcf4e2..7ba63d146412 100644
--- a/code/core/src/manager/globals/exports.ts
+++ b/code/core/src/manager/globals/exports.ts
@@ -677,7 +677,6 @@ export default {
     'CoreWebpackCompiler',
     'Feature',
     'SupportedBuilder',
-    'SupportedFramework',
     'SupportedLanguage',
     'SupportedRenderer',
   ],

From a733e501c1ded7236f662af41d02c929f6b4b1fe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 28 May 2026 08:47:18 +0000
Subject: [PATCH 3/6] Fix: change DocsWrapper horizontal padding from 20px to
 40px to prevent anchor link cutoff

Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com>
---
 code/addons/docs/src/blocks/components/DocsPage.tsx | 2 +-
 code/core/src/manager/globals/exports.ts            | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/addons/docs/src/blocks/components/DocsPage.tsx b/code/addons/docs/src/blocks/components/DocsPage.tsx
index ac5576ed7d58..fdc7ec4f16bd 100644
--- a/code/addons/docs/src/blocks/components/DocsPage.tsx
+++ b/code/addons/docs/src/blocks/components/DocsPage.tsx
@@ -440,7 +440,7 @@ export const DocsWrapper = styled.div(({ theme }) => ({
   display: 'flex',
   flexDirection: 'row-reverse',
   justifyContent: 'center',
-  padding: '4rem 20px',
+  padding: '4rem 40px',
   minHeight: '100vh',
   boxSizing: 'border-box',
   gap: '3rem',
diff --git a/code/core/src/manager/globals/exports.ts b/code/core/src/manager/globals/exports.ts
index 7ba63d146412..1836eedcf4e2 100644
--- a/code/core/src/manager/globals/exports.ts
+++ b/code/core/src/manager/globals/exports.ts
@@ -677,6 +677,7 @@ export default {
     'CoreWebpackCompiler',
     'Feature',
     'SupportedBuilder',
+    'SupportedFramework',
     'SupportedLanguage',
     'SupportedRenderer',
   ],

From 51071c67879981d286a195df70f6632c31e4f3f1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 28 May 2026 16:04:36 +0000
Subject: [PATCH 4/6] Adjust docs heading anchor spacing and button padding

Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com>
---
 code/addons/docs/src/blocks/blocks/mdx.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/mdx.tsx b/code/addons/docs/src/blocks/blocks/mdx.tsx
index 2245613bdf42..6d5eb738734a 100644
--- a/code/addons/docs/src/blocks/blocks/mdx.tsx
+++ b/code/addons/docs/src/blocks/blocks/mdx.tsx
@@ -166,7 +166,7 @@ const OcticonAnchorWrapper = styled.span({
   top: 0,
   right: '100%',
   lineHeight: 'inherit',
-  paddingRight: '10px',
+  paddingRight: '8px',
   // Allow the theme's text color to override the default link color.
   color: 'inherit',
   '& a': {
@@ -195,7 +195,13 @@ const HeaderWithOcticonAnchor: FC<PropsWithChildren<HeaderWithOcticonAnchorProps
   return (
     <OcticonHeader id={id} {...rest}>
       <OcticonAnchorWrapper>
-        <Button asChild variant="ghost" size="small" ariaLabel="Copy heading URL to address bar">
+        <Button
+          asChild
+          variant="ghost"
+          size="small"
+          padding="small"
+          ariaLabel="Copy heading URL to address bar"
+        >
           <a
             href={hash}
             target="_self"

From 5f2975fbcaa36fc01cb35c7263cf99e663dca33e Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 28 May 2026 19:27:35 +0200
Subject: [PATCH 5/6] Improve vertical positioning

---
 code/addons/docs/src/blocks/blocks/mdx.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/mdx.tsx b/code/addons/docs/src/blocks/blocks/mdx.tsx
index 6d5eb738734a..250810c7cbd8 100644
--- a/code/addons/docs/src/blocks/blocks/mdx.tsx
+++ b/code/addons/docs/src/blocks/blocks/mdx.tsx
@@ -145,6 +145,10 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
     ...acc,
     [headerType]: styled(headerType)({
       position: 'relative',
+      display: 'flex',
+      gap: 8,
+      marginInlineStart: -40,
+      alignItems: 'center',
       '& svg': {
         position: 'relative',
         top: '-0.1em',
@@ -162,11 +166,8 @@ const OcticonAnchorWrapper = styled.span({
   // Position the anchor in the heading's left gutter instead of floating it, so the
   // Button's dimensions never shift the heading text. The parent header is relatively
   // positioned to anchor this.
-  position: 'absolute',
-  top: 0,
-  right: '100%',
   lineHeight: 'inherit',
-  paddingRight: '8px',
+  marginInline: '2px -2px',
   // Allow the theme's text color to override the default link color.
   color: 'inherit',
   '& a': {

From 7509038f385711c2a690541a0315a6925e0468d1 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 28 May 2026 21:03:57 +0200
Subject: [PATCH 6/6] Try other vertical alignment approach

---
 code/addons/docs/src/blocks/blocks/mdx.tsx | 89 ++++++++++++----------
 1 file changed, 50 insertions(+), 39 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/mdx.tsx b/code/addons/docs/src/blocks/blocks/mdx.tsx
index 250810c7cbd8..4339ea8a24e6 100644
--- a/code/addons/docs/src/blocks/blocks/mdx.tsx
+++ b/code/addons/docs/src/blocks/blocks/mdx.tsx
@@ -143,31 +143,36 @@ const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
   (acc, headerType) => ({
     ...acc,
-    [headerType]: styled(headerType)({
-      position: 'relative',
-      display: 'flex',
-      gap: 8,
-      marginInlineStart: -40,
-      alignItems: 'center',
-      '& svg': {
-        position: 'relative',
-        top: '-0.1em',
-        visibility: 'hidden',
-      },
-      '&:hover svg, &:focus-within svg': {
-        visibility: 'visible',
-      },
-    }),
+    [headerType]: styled(headerType)({}),
   }),
   {}
 );
 
+const OcticonAlignmentWrapper = styled.span({
+  display: 'block',
+  position: 'relative',
+  '& svg': {
+    visibility: 'hidden',
+  },
+  '&:hover svg, &:focus-within svg': {
+    visibility: 'visible',
+  },
+});
+
 const OcticonAnchorWrapper = styled.span({
   // Position the anchor in the heading's left gutter instead of floating it, so the
   // Button's dimensions never shift the heading text. The parent header is relatively
   // positioned to anchor this.
+  position: 'absolute',
+  top: '50%',
+  right: '100%',
   lineHeight: 'inherit',
-  marginInline: '2px -2px',
+  paddingRight: '8px',
+  // Increase specificity to avoid being overridden by DocsPage based on
+  // CSS block load order.
+  '&&': {
+    marginTop: -14, // Half the Button's height to center it vertically
+  },
   // Allow the theme's text color to override the default link color.
   color: 'inherit',
   '& a': {
@@ -176,6 +181,10 @@ const OcticonAnchorWrapper = styled.span({
   },
 });
 
+const HeaderTitle = styled.span({
+  // marginInlineStart: -40,
+});
+
 interface HeaderWithOcticonAnchorProps {
   as: string;
   id: string;
@@ -195,30 +204,32 @@ const HeaderWithOcticonAnchor: FC<PropsWithChildren<HeaderWithOcticonAnchorProps
 
   return (
     <OcticonHeader id={id} {...rest}>
-      <OcticonAnchorWrapper>
-        <Button
-          asChild
-          variant="ghost"
-          size="small"
-          padding="small"
-          ariaLabel="Copy heading URL to address bar"
-        >
-          <a
-            href={hash}
-            target="_self"
-            onClick={(event: MouseEvent<HTMLAnchorElement>) => {
-              event.preventDefault();
-              const element = document.getElementById(id);
-              if (element) {
-                navigate(context, hash);
-              }
-            }}
+      <OcticonAlignmentWrapper className="sb-unstyled">
+        <OcticonAnchorWrapper>
+          <Button
+            asChild
+            variant="ghost"
+            size="small"
+            padding="small"
+            ariaLabel="Copy heading URL to address bar"
           >
-            <LinkIcon />
-          </a>
-        </Button>
-      </OcticonAnchorWrapper>
-      {children}
+            <a
+              href={hash}
+              target="_self"
+              onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+                event.preventDefault();
+                const element = document.getElementById(id);
+                if (element) {
+                  navigate(context, hash);
+                }
+              }}
+            >
+              <LinkIcon />
+            </a>
+          </Button>
+        </OcticonAnchorWrapper>
+        {children}
+      </OcticonAlignmentWrapper>
     </OcticonHeader>
   );
 };