From 03151da68e545460b70583b1575b70aaf8ec408f Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Fri, 11 Oct 2024 16:04:08 +0200 Subject: [PATCH] UI - Fix scroll offset / tab buttons hiding behind menu/header --- changedetectionio/static/styles/scss/styles.scss | 8 +++++++- changedetectionio/static/styles/styles.css | 5 ++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index 3082d335..e14a31b7 100644 --- 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 index 9e350d35..a65c1d5d 100644 --- 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;