From 05c5ab25d40ba960db98e5c9b2fe064d34a6a1ad Mon Sep 17 00:00:00 2001 From: Nick Budak Date: Fri, 31 Jan 2025 11:02:49 -0800 Subject: [PATCH] Ensure that the search bar is visible when focused via anchor link The anchor links in the skip links navigation cause the search bar to be focused when activated, but in some cases the bar itself is scrolled up and out of view, making it hard to interact with after focusing. This adds some styling to create an extra scroll margin so that the search elements stay within view when focused using an anchor link. Ref https://github.com/sul-dlss/earthworks/issues/1467 --- app/assets/stylesheets/blacklight/_search_form.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/stylesheets/blacklight/_search_form.scss b/app/assets/stylesheets/blacklight/_search_form.scss index 3e8c6939d8..682a1c7dd2 100644 --- a/app/assets/stylesheets/blacklight/_search_form.scss +++ b/app/assets/stylesheets/blacklight/_search_form.scss @@ -27,3 +27,10 @@ border-bottom-left-radius: 0; display: flex; } + +// ensure that the search bar appears at the top of the page when focused using +// anchor links, e.g. from the skip links navigation +.search-field, +.search-q { + scroll-margin: 5rem; +}