From 7e2ce3b5bdd4eed8ead9476393da1dbac3255515 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Wed, 9 Oct 2024 19:21:14 +0100
Subject: [PATCH 1/2] fix: increase heading scroll margin under onboarding
 options

---
 src/components/docPage/type.scss    | 4 ++++
 src/components/onboarding/index.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index 04af19d969a6bb..dc8055b799d9f3 100644
--- 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
index 98592acb39eed2..da581c0da2b70b 100644
--- 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"

From 515df0147d1a31a8a5e7f0c3992568180b762c30 Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Wed, 30 Oct 2024 13:35:47 +0100
Subject: [PATCH 2/2] fix on mobile

---
 src/components/docPage/type.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index dc8055b799d9f3..df257b2b774652 100644
--- a/src/components/docPage/type.scss
+++ b/src/components/docPage/type.scss
@@ -41,9 +41,17 @@
 
     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);
+    --scroll-margin-top: calc(var(--header-height) + 1.5rem + 2rem);
+    scroll-margin-top: var(--scroll-margin-top);
+  }
+
+  @media (max-width: 768px) {
+    .onboarding-options ~ :is(h1, h2, h3, h4, h5, h6) {
+      --scroll-margin-top: calc(var(--header-height) + 1.5rem + 5rem);
+    }
   }
 
   h1 {