From ce174d507d1dc46e291f2c5e4ef1c4857188f1ae Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Sun, 6 Feb 2022 12:39:52 +0100
Subject: [PATCH] Prevent initial scroll to section nav (#3411)

* Prevent initial scroll to section nav

On pages taht contain a section nav (sub navigation) the previous `scrollIntoView` led to an initial scroll position start at the section nav. See the store or server settings for examples.

This fixes it so that the scroll vertical position always starts at 0.

* Mobile: Prevent anchors from disappearing underneath the fixed header

* Add content padding top to scroll padding
---
 BTCPayServer/Views/Shared/_NavLayout.cshtml | 2 +-
 BTCPayServer/wwwroot/main/layout.css        | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/BTCPayServer/Views/Shared/_NavLayout.cshtml b/BTCPayServer/Views/Shared/_NavLayout.cshtml
index 77eb446fe..dff9e4434 100644
--- a/BTCPayServer/Views/Shared/_NavLayout.cshtml
+++ b/BTCPayServer/Views/Shared/_NavLayout.cshtml
@@ -22,7 +22,7 @@
     <script>
         (function () {
             const activeEl = document.querySelector('#SectionNav .nav .active')
-            if (activeEl) activeEl.scrollIntoView({ inline: 'center' })
+            if (activeEl) activeEl.scrollIntoView({ block: 'end', inline: 'center' })
         })()
     </script>
 }
diff --git a/BTCPayServer/wwwroot/main/layout.css b/BTCPayServer/wwwroot/main/layout.css
index ec7777df0..8b3e348de 100644
--- a/BTCPayServer/wwwroot/main/layout.css
+++ b/BTCPayServer/wwwroot/main/layout.css
@@ -357,6 +357,10 @@
 @media (max-width: 991px) {
     :root {
         --header-height: var(--mobile-header-height);
+        --content-padding-top: var(--btcpay-space-m);
+
+        /* Prevent anchors from disappearing underneath the fixed header */
+        scroll-padding: calc(var(--header-height) + var(--content-padding-top));
     }
     
     #mainMenu {
@@ -469,7 +473,7 @@
 
     #mainContent > section {
         margin-top: var(--header-height);
-        padding: var(--btcpay-space-m) var(--btcpay-space-m) var(--btcpay-space-xl);
+        padding: var(--content-padding-top) var(--btcpay-space-m) var(--btcpay-space-xl);
     }
 
     #SectionNav {