From 9cda50b81de3db70e5fd08babf198b600637bb13 Mon Sep 17 00:00:00 2001
From: Nick Budak <budak@stanford.edu>
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/builds/blacklight.css                    | 5 +++++
 app/assets/stylesheets/blacklight/_search_form.scss | 7 +++++++
 2 files changed, 12 insertions(+)

diff --git a/app/assets/builds/blacklight.css b/app/assets/builds/blacklight.css
index d1d4cf1454..847430ffaf 100644
--- a/app/assets/builds/blacklight.css
+++ b/app/assets/builds/blacklight.css
@@ -149,6 +149,11 @@ main {
   display: flex;
 }
 
+.search-field,
+.search-q {
+  scroll-margin: 5rem;
+}
+
 .documents-list {
   --bl-results-document-margin-top: 1rem;
   --bl-results-document-padding-top: 1rem;
diff --git a/app/assets/stylesheets/blacklight/_search_form.scss b/app/assets/stylesheets/blacklight/_search_form.scss
index 20cbe65bf4..13c4c5cd95 100644
--- a/app/assets/stylesheets/blacklight/_search_form.scss
+++ b/app/assets/stylesheets/blacklight/_search_form.scss
@@ -26,3 +26,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;
+}