From dabc5e95ce210ae14cb33a08e6784826e4e2d544 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 27 Jul 2026 12:39:23 +0530
Subject: [PATCH] fix(theme): correct anchor scroll margins across viewports

---
 .../styles/components/vp-doc.css              | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 4c069ac4..24c37d40 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -1,3 +1,28 @@
+/**
+ * Anchors
+ * -------------------------------------------------------------------------- */
+
+.vp-doc [id] {
+  scroll-margin-top: calc(
+    47px + var(--vp-layout-top-height, 0px) +
+      var(--vp-extra-scroll-margin, 24px)
+  );
+
+  @media (min-width: 960px) {
+    scroll-margin-top: calc(
+      var(--vp-nav-height) + 47px + var(--vp-layout-top-height, 0px) +
+        var(--vp-extra-scroll-margin, 24px)
+    );
+  }
+
+  @media (min-width: 1280px) {
+    scroll-margin-top: calc(
+      var(--vp-nav-height) + var(--vp-layout-top-height, 0px) +
+        var(--vp-extra-scroll-margin, 24px)
+    );
+  }
+}
+
 /**
  * Headings
  * -------------------------------------------------------------------------- */
@@ -11,9 +36,6 @@
   position: relative;
   font-weight: 600;
   outline: none;
-  scroll-margin-top: calc(
-    var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 24px
-  );
 }
 
 .vp-doc h1 {
@@ -29,6 +51,8 @@
   letter-spacing: -0.02em;
   line-height: 32px;
   font-size: 24px;
+  /* since it already has a top padding of 24px, we don't need extra scroll margin */
+  --vp-extra-scroll-margin: 0px;
 }
 
 .vp-doc h3 {