Fix scrolling to anchor offset

Author: AndreasArvidsson

packages/cursorless-org-docs/src/docs/user/languages/components/DynamicTOC.tsx

@@ -16,38 +16,29 @@ export default function DynamicTOC() {
 }
 
 function getTOC() {
-  const headingElements = Array.from(document.querySelectorAll("h3")).map(
-    (el) => ({
-      id: el.id,
-      text: el.textContent?.replace("#", "") ?? "",
-    }),
-  );
-
   const col = document.createElement("div");
   col.className = "col col--3";
 
   const toc = document.createElement("div");
   toc.className = "tableOfContents_tkZC thin-scrollbar";
-  toc.style.position = "fixed";
-  toc.style.right = "1rem";
-  toc.style.width = "14rem";
-  col.appendChild(toc);
 
   const ul = document.createElement("ul");
   ul.className = "table-of-contents table-of-contents__left-border";
-  toc.appendChild(ul);
 
-  headingElements.forEach((h) => {
+  document.querySelectorAll("h3").forEach((header) => {
     const li = document.createElement("li");
 
     const a = document.createElement("a");
-    a.href = `#${h.id}`;
+    a.href = `#${header.id}`;
     a.className = "table-of-contents__link";
-    a.textContent = h.text;
+    a.textContent = header.textContent;
 
     li.appendChild(a);
     ul.appendChild(li);
   });
 
+  toc.appendChild(ul);
+  col.appendChild(toc);
+
   return col;
 }

packages/cursorless-org-docs/src/docs/user/languages/components/Language.tsx

@@ -10,6 +10,7 @@ export function Language({ languageId }: Props) {
   return (
     <>
       <DynamicTOC />
+
       <ScopeSupport languageId={languageId} />
     </>
   );

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupport.css

@@ -1,12 +1,3 @@
 .facet-name {
   font-weight: 600;
 }
-
-.scope-header a {
-  display: none;
-  margin-left: 0.5rem;
-}
-
-.scope-header:hover a {
-  display: inline;
-}

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupport.tsx

@@ -88,9 +88,9 @@ function renderScope(
   const href = scope.scope.toLowerCase().replaceAll(" ", "-");
   return (
     <div key={scope.scope}>
-      <h3 id={href} className="scope-header">
+      <h3 id={href} className="scope-header anchorWithStickyNavbar_IncK">
         {scope.scope}
-        <a href={`#${href}`}>#</a>
+        <a className="hash-link" href={`#${href}`} />
       </h3>
       {scope.facets.map((f) =>
         renderFacet(languageId, rangeType, renderWhitespace, f),