fix: increase heading scroll margin under onboarding options

getsentry · Oct 9, 2024 · 7e2ce3b · 7e2ce3b
1 parent 97884d4
commit 7e2ce3b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/docPage/type.scss b/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;

diff --git a/src/components/onboarding/index.tsx b/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"