From cbb7982989cbe57370f5529495044710f0b2ed2b Mon Sep 17 00:00:00 2001
From: Abinash <implabinash@gmail.com>
Date: Wed, 11 Mar 2026 18:13:56 +0530
Subject: [PATCH] docs: Allow navigating search results with arrow keys
 (#50901)

Closes #50604


https://github.com/user-attachments/assets/8a85b39e-e463-4fee-bc1f-2a03fe193ce3


https://github.com/user-attachments/assets/8290bb06-1eaf-4852-9568-97654e30211e

### Results:
Now, you can scroll the search results with the arrow keys.

### Suggestion:
While this is working, I like to propose some better UX.

When you scroll with the arrow keys, the whole search results are
scrolling along with the search bar. But, I think it would be better if
we keep the search bar fixed on top and only the results scroll. Here is
an example:


https://github.com/user-attachments/assets/af9dce73-27c6-407b-8180-2f771a85303b

If you think this will be better, please let me know, and I will update
this PR.

Thank you.

Release Notes:

- Fixed docs search results scrolling with arrow keys

---------

Co-authored-by: Gaauwe Rombouts <mail@grombouts.nl>
---
 docs/theme/css/chrome.css | 19 ++++++++++++-------
 docs/theme/index.hbs      | 25 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/docs/theme/css/chrome.css b/docs/theme/css/chrome.css
index 3f4fa40bc41a9c034c50c94c10fd8d0222d6b720..8f5b40cc19ecfd6cbedd0e5f76b5121afa5e5273 100644
--- a/docs/theme/css/chrome.css
+++ b/docs/theme/css/chrome.css
@@ -368,7 +368,10 @@ mark.fade-out {
 .searchbar-outer {
   margin-inline-start: auto;
   margin-inline-end: auto;
+  width: 100%;
   max-width: var(--content-max-width);
+  box-sizing: border-box;
+  padding: 16px;
 }
 
 #searchbar {
@@ -394,21 +397,21 @@ mark.fade-out {
 .searchresults-header {
   font-weight: bold;
   font-size: 1em;
-  padding-block-start: 18px;
+  padding-block-start: 0;
   padding-block-end: 0;
-  padding-inline-start: 5px;
-  padding-inline-end: 0;
   color: var(--searchresults-header-fg);
 }
 
 ul#searchresults {
   list-style: none;
   padding-inline-start: 0;
+  margin-block-end: 0;
 }
 ul#searchresults li {
   margin: 10px 0px;
   padding: 2px;
   border-radius: 2px;
+  scroll-margin-block-end: 10px;
 }
 ul#searchresults li.focus {
   background-color: var(--searchresults-li-bg);
@@ -794,8 +797,7 @@ ul#searchresults span.teaser em {
   max-height: 600px;
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  overflow-y: auto;
+  overflow-y: hidden;
 
   border-radius: 8px;
   background: var(--popover-bg);
@@ -803,8 +805,11 @@ ul#searchresults span.teaser em {
   box-shadow: var(--popover-shadow);
 }
 
-.searchbar-outer {
-  width: 100%;
+.searchresults-outer {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0px 22px 22px 22px;
 }
 
 #searchbar {
diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs
index 1c833ee94d428a1578b35c7944c4d300a04a21db..24378bcca6909b2e3e894c6c32db5f32d77921de 100644
--- a/docs/theme/index.hbs
+++ b/docs/theme/index.hbs
@@ -424,6 +424,31 @@
         <script src="{{ path_to_root }}elasticlunr.min.js"></script>
         <script src="{{ path_to_root }}mark.min.js"></script>
         <script src="{{ path_to_root }}searcher.js"></script>
+
+        <script>
+           (function () {
+                // Check for focused search result and bring into the view
+                const ensureVisible = () => {
+                    const focused = document.querySelector("#searchresults li.focus");
+
+                    if (focused) {
+                        focused.scrollIntoView({
+                            block: "nearest",
+                            inline: "nearest"
+                        });
+                    }
+                };
+
+                // 1. Listen for arrow key events
+                // 2. Wait for DOM to update
+                // 3. Call envsureVisible
+                document.addEventListener("keydown", function (e) {
+                    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                        requestAnimationFrame(ensureVisible);
+                    }
+                });
+            })();
+        </script>
         {{/if}}
 
         <script src="{{ path_to_root }}clipboard.min.js"></script>