Navbar scroll: unintended scroll while tabing inside navbar

.bundlewatch.config.json

@@ -10,7 +10,7 @@
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "4.75 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "44.5 kB"
+      "maxSize": "44.75 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

scss/_reboot.scss

@@ -35,20 +35,37 @@
       scroll-behavior: smooth;
     }
   }
+}
 
-  // Boosted mod: Improve focus visibility when fixed/sticky header is used
-  // See https://caniuse.com/?search=scroll-padding
-  // scss-docs-start scroll-offset
-  @if $enable-fixed-header {
-    scroll-padding-top: $scroll-offset-top * .5;
-
-    @include media-breakpoint-up(lg) {
-      scroll-padding-top: $scroll-offset-top;
+// Boosted mod: Improve focus visibility when fixed/sticky header is used
+// See https://caniuse.com/?search=scroll-padding
+// scss-docs-start scroll-offset
+@if $enable-fixed-header {
+  main {
+    a,
+    button,
+    input,
+    select,
+    textarea,
+    h2,
+    h3,
+    h4,
+    [tabindex="0"] {
+      scroll-margin-top: calc(#{$scroll-offset-top} * .5 + 1rem); // stylelint-disable-line function-disallowed-list
+      scroll-margin-bottom: 100px;
+
+      @include media-breakpoint-up(md) {
+        scroll-margin-top: calc(#{$scroll-offset-top} + 2rem); // stylelint-disable-line function-disallowed-list
+
+        .header-minimized ~ & {
+          scroll-margin-top: $scroll-offset-top;
+        }
+      }
     }
   }
-  // scss-docs-end scroll-offset
-  // End mod
 }
+// scss-docs-end scroll-offset
+// End mod
 
 
 // Body

scss/_variables.scss

@@ -443,7 +443,7 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: false !default;
 $enable-important-utilities:  true !default;
-$enable-fixed-header:         true !default; // Boosted mod: used to apply scroll-padding-top
+$enable-fixed-header:         true !default; // Boosted mod: used to apply scroll-margin-top
 
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`
@@ -2274,7 +2274,7 @@ $pre-line-height:                   1.25 !default;
 //
 
 //// Scroll margin
-$scroll-offset-top:              $spacer * 6 !default; // Matching .navbar computed height
+$scroll-offset-top:              $spacer * 5 !default; // Matching .navbar computed height
 
 //// Back to top
 // scss-docs-start back-to-top

site/assets/scss/_boosted.scss

@@ -1,12 +1,4 @@
 // stylelint-disable selector-max-id
-:root {
-  scroll-padding-top: $offset-top / 2;
-
-  @include media-breakpoint-up(lg) {
-    scroll-padding-top: $offset-top;
-  }
-}
-
 html,
 body {
   min-height: 100vh;

site/assets/scss/_scrolling.scss

@@ -10,18 +10,22 @@ main {
   h3,
   h4,
   [tabindex="0"] {
-    scroll-margin-top: 80px;
+    scroll-margin-top: add($offset-top, .5rem);
     scroll-margin-bottom: 100px;
 
     @include media-breakpoint-up(md) {
+      scroll-margin-top: add($offset-top, 4rem);
+
       .header-minimized ~ .bd-gutter & {
-        scroll-margin-top: 8.5rem;
+        scroll-margin-top: add($offset-top, 1.5rem);
       }
     }
 
     @include media-breakpoint-up(lg) {
+      scroll-margin-top: add($offset-top, 2.5rem);
+
       .header-minimized ~ .bd-gutter & {
-        scroll-margin-top: 5.5rem;
+        scroll-margin-top: $offset-top;
       }
     }
   }

site/content/docs/5.3/getting-started/accessibility.md

@@ -78,7 +78,7 @@ Each component then specifies its own visible focus style when needed, for examp
 
 #### Under a fixed header
 
-When using a fixed (or sticky) header, tabbing backward often hides focused element under the header. Boosted sets `scroll-padding-top` property for such case. This feature is configurable in two ways:
+When using a fixed (or sticky) header, tabbing backward often hides focused element under the header. Boosted sets `scroll-margin-top` and `scroll-margin-bottom` properties for such case. This feature is configurable in two ways:
 
 1. `$scroll-offset-top` variable defines the offset,
 2. and [`$enable-fixed-header` allows to drop this rule]({{< docsref "/customize/options" >}}) if you don't use a fixed header.