UI - Fix scroll offset / tab buttons hiding behind menu/header

dgtlmoon · Oct 11, 2024 · 03151da · 03151da
1 parent a16a702
commit 03151da
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss
@@ -147,8 +147,13 @@ body.spinner-active {
   }
 }
 
+.tabs ul li a {
+  // .tab-pane-inner will have the #id that the tab button jumps/anchors to
+  scroll-margin-top: 200px;
+}
+
 section.content {
-  padding-top: 5em;
+  padding-top: 100px;
   padding-bottom: 1em;
   flex-direction: column;
   display: flex;
@@ -931,6 +936,7 @@ $form-edge-padding: 20px;
 }
 
 .tab-pane-inner {
+
   &:not(:target) {
     display: none;
   }

diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
@@ -605,8 +605,11 @@ body.spinner-active #pure-menu-horizontal-spinner {
     background-color: var(--color-background-menu-link-hover);
     color: var(--color-text-menu-link-hover); }
 
+.tabs ul li a {
+  scroll-margin-top: 200px; }
+
 section.content {
-  padding-top: 5em;
+  padding-top: 100px;
   padding-bottom: 1em;
   flex-direction: column;
   display: flex;