src/App.scss

@@ -100,10 +100,10 @@ li {
   // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
   // - others We don't include border and padding and scroll to the top of the image
   &:first-child {
-    scroll-margin-top: $header-height + $body-vertical-padding + 20px;
+    scroll-margin-top: $body-vertical-padding + 20px;
   }
   &:not(:first-child) {
-    scroll-margin-top: $header-height + $body-vertical-padding;
+    scroll-margin-top: $body-vertical-padding;
   }
 }
 
@@ -148,7 +148,7 @@ li {
   justify-content: start;
   align-items: start;
 
-  scroll-margin-top: $header-height + $body-vertical-padding;
+  scroll-margin-top: $body-vertical-padding;
 }
 
 [data-dev='true'] {

src/layouts/StickySideColumns.module.scss

@@ -42,15 +42,22 @@
 .sides {
   @media only screen and (min-width: 768px) {
     position: sticky;
-    top: $header-height + $body-vertical-padding;
+    top: $body-vertical-padding;
   }
   > :first-child {
+    // We want to keep header on smaller devices at all times
     max-height: calc(
       100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
     );
+
+    @media only screen and (min-width: 768px) {
+      max-height: calc(100dvh - $body-vertical-padding * 2);
+    }
   }
 }
 
+// Adjust the content scroll on smaller screens
+// Make sure only the inner tab is scrolling
 .scrollAdjust {
   @media only screen and (max-width: 767px) {
     max-height: calc(

src/layouts/style.module.scss

@@ -3,5 +3,5 @@
 
 .main {
   flex-grow: 1;
-  padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
+  padding: $body-vertical-padding 0 $body-vertical-padding 0;
 }