From d45ea63c2090796436f40c88ae73c98818b94a49 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 19 Sep 2024 10:53:53 +0200
Subject: [PATCH] refactor: remove header height from calc

---
 src/App.scss                              | 6 +++---
 src/layouts/StickySideColumns.module.scss | 9 ++++++++-
 src/layouts/style.module.scss             | 2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index c4fa323..29e7e8f 100644
--- a/src/App.scss
+++ b/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'] {
diff --git a/src/layouts/StickySideColumns.module.scss b/src/layouts/StickySideColumns.module.scss
index a116720..5b6d890 100644
--- a/src/layouts/StickySideColumns.module.scss
+++ b/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(
diff --git a/src/layouts/style.module.scss b/src/layouts/style.module.scss
index 6c8aa59..1ad8647 100644
--- a/src/layouts/style.module.scss
+++ b/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;
 }