fix: increase heading scroll margin under onboarding options

Author: a-hariti

src/components/docPage/type.scss

@@ -41,6 +41,10 @@
 
     scroll-margin-top: calc(var(--header-height) + 1.5rem);
   }
+  .onboarding-options ~ :is(h1, h2, h3, h4, h5, h6) {
+    // the magic 2rem to account for the onboarding options
+    scroll-margin-top: calc(var(--header-height) + 1.5rem + 2rem);
+  }
 
   h1 {
     font-size: 2rem;

src/components/onboarding/index.tsx

@@ -212,7 +212,7 @@ export function OnboardingOptionButtons({
   }, [options, touchedOptions]);
 
   return (
-    <div className="flex flex-wrap gap-3 py-2 bg-[var(--white)] dark:bg-[var(--gray-1)]  sticky top-[80px] z-[4] shadow-[var(--shadow-6)] transition">
+    <div className="onboarding-options flex flex-wrap gap-3 py-2 bg-[var(--white)] dark:bg-[var(--gray-1)]  sticky top-[80px] z-[4] shadow-[var(--shadow-6)] transition">
       {options.map(option => (
         <Button
           variant="surface"