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 sul-dlss/earthworks#1467
projectblacklight · Jan 31, 2025 · 9cda50b · 9cda50b
1 parent e5618b6
commit 9cda50b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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;
+}