From f0a439bfc5d1f49cec113ee9202993be4b002b1b Mon Sep 17 00:00:00 2001 From: Mark Hansen Date: Sat, 27 Jun 2020 17:12:11 +1000 Subject: [PATCH] Web: Scroll hash-fragment links with navbar height (#7456) Previously, hash-fragment links like this: http://mark-t510:9090/targets#job-alertmanager Would scroll to have the header at the top, obscured by the nav bar. Tested in both old and new UIs. Fixes #7434 Signed-off-by: Mark Hansen --- web/ui/react-app/src/App.css | 6 ++++++ web/ui/static/css/prometheus.css | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css index 2e34f77a3..d34f68a25 100644 --- a/web/ui/react-app/src/App.css +++ b/web/ui/react-app/src/App.css @@ -1,3 +1,9 @@ +html { + /* https://github.com/prometheus/prometheus/issues/7434 */ + /* Scroll to hash-fragment-links counting the fixed navbar 40px tall with 16px padding */ + scroll-padding-top: 56px; +} + .panel { margin-bottom: 20px; } diff --git a/web/ui/static/css/prometheus.css b/web/ui/static/css/prometheus.css index 0297e7c85..344be9243 100644 --- a/web/ui/static/css/prometheus.css +++ b/web/ui/static/css/prometheus.css @@ -1,3 +1,9 @@ +html { + /* https://github.com/prometheus/prometheus/issues/7434 */ + /* Scroll to hash-fragment-links counting the fixed navbar 40px tall + 16px padding */ + scroll-padding-top: 56px; +} + /* Move down content because we have a fixed navbar that is 50px tall with 20px padding */ body { padding-top: 70px;