4 files changed, 84 insertions, 16 deletions

diff --git a/src/static/css/responsive.css b/src/static/css/responsive.css
index 86cd7eb6..38e4188a 100644
--- a/src/static/css/responsive.css
+++ b/src/static/css/responsive.css
@@ -106,7 +106,7 @@
   }
 
   .wiki-search-sidebar-box {
-    max-height: max(245px, 60vh, calc(100vh - 205px));
+    --keep-viewport-visible: 205px;
   }
 
   /* End duplicated for "sidebars in content column" */
diff --git a/src/static/css/search.css b/src/static/css/search.css
index f421803b..3c56eed6 100644
--- a/src/static/css/search.css
+++ b/src/static/css/search.css
@@ -5,11 +5,17 @@
     padding: 1px 0 0 0;
 
     z-index: 100;
-    max-height: calc(100vh - 20px);
+
+    --keep-viewport-visible: 125px;
+    max-height: max(245px, 60vh, calc(100vh - var(--keep-viewport-visible)));
 
     display: flex;
     flex-direction: column;
   }
+
+  #banner.short ~ * .wiki-search-sidebar-box {
+    --keep-viewport-visible: 180px;
+  }
 }
 
 @layer material {
@@ -32,17 +38,20 @@
 
 /* Interactions with other sidebar boxes */
 
-@layer interaction {
-  /* This is to say, any sidebar that's *not*
-   * the first sidebar after the search box.
+@layer layout {
+  /* This is to say, any sidebar that's *not* the first sidebar
+   * after the search box, effectively squishing the rest of the
+   * boxes a bit tighter together.
    */
   .wiki-search-sidebar-box.showing-results + .sidebar ~ .sidebar {
-    margin-top: 5px;
+    margin-top: 8px;
   }
+}
 
+@layer interaction {
   .wiki-search-sidebar-box.showing-results ~ .sidebar:not(:hover) {
     opacity: 0.8;
-    filter: brightness(0.7);
+    filter: brightness(0.85);
   }
 }
 
@@ -191,6 +200,8 @@
 @layer layout {
   .wiki-search-context-container {
     padding: 2px 12px 4px;
+    padding-left: calc(12px + 1.2ch);
+    text-indent: -1.2ch;
   }
 }
 
@@ -322,11 +333,51 @@
 
 @layer layout {
   .wiki-search-results-container {
+    position: relative;
     margin-bottom: 0;
     padding: 2px;
   }
 }
 
+@layer interaction {
+  .wiki-search-results-container::before,
+  .wiki-search-results-container::after {
+    content: "";
+    display: block;
+    position: sticky;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .wiki-search-result:hover {
+    z-index: 2;
+  }
+
+  /* Shadow along top edge */
+
+  .wiki-search-results-container > :first-child {
+    margin-top: -4px;
+  }
+
+  .wiki-search-results-container::before {
+    height: 8px; top: -2px;
+    background: linear-gradient(to bottom, black, black 50%, transparent);
+    opacity: 0.4;
+  }
+
+  /* Shadow along bottom edge */
+
+  .wiki-search-results-container > :last-child {
+    margin-bottom: -10px;
+  }
+
+  .wiki-search-results-container::after {
+    height: 16px; bottom: -2px;
+    background: linear-gradient(to top, black, black 30%, transparent);
+    opacity: 0.4;
+  }
+}
+
 /* Basic result styling, including interactions */
 
 @layer layout {
diff --git a/src/static/js/client/index.js b/src/static/js/client/index.js
index cd617bea..9296dff1 100644
--- a/src/static/js/client/index.js
+++ b/src/static/js/client/index.js
@@ -60,6 +60,7 @@ const clientInfo = window.hsmusicClientInfo = Object.create(null);
 // So for example, all modules' getPageReferences steps are evaluated, then
 // all modules' addInternalListeners steps are evaluated, and so on.
 const setupSteps = {
+  bindSessionStorage: [],
   getPageReferences: [],
   addInternalListeners: [],
   mutatePageContent: [],
@@ -322,7 +323,11 @@ function evaluateBindSessionStorageStep(bindSessionStorage) {
 function evaluateStep(stepsObject, key) {
   for (const step of stepsObject[key]) {
     try {
-      step();
+      if (key === 'bindSessionStorage') {
+        evaluateBindSessionStorageStep(step);
+      } else {
+        step();
+      }
     } catch (error) {
       console.error(`During ${key}, failed to run ${step.name}`);
       console.error(error);
diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js
index c39c38bc..386bf477 100644
--- a/src/static/js/client/sidebar-search.js
+++ b/src/static/js/client/sidebar-search.js
@@ -106,6 +106,8 @@ export const info = {
     recallingRecentSearch: null,
     recallingRecentSearchFromMouse: null,
 
+    justPerformedActiveQuery: false,
+
     currentValue: null,
 
     workerStatus: null,
@@ -585,7 +587,6 @@ export function addPageListeners() {
     clearSidebarSearch();
     clearSidebarFilter();
     possiblyHideSearchSidebarColumn();
-    restoreSidebarSearchColumn();
   });
 
   forEachFilter((type, filterLink) => {
@@ -614,7 +615,7 @@ export function addPageListeners() {
       return;
     }
 
-    if (event.shiftKey && event.code === 'Slash') {
+    if (domEvent.shiftKey && domEvent.code === 'Slash') {
       domEvent.preventDefault();
       info.searchLabel.click();
     }
@@ -731,6 +732,7 @@ async function activateSidebarSearch(query) {
     return;
   }
 
+  state.justPerformedActiveQuery = true;
   state.searchStage = 'complete';
   updateSidebarSearchStatus();
 
@@ -783,7 +785,7 @@ function recordActiveQueryContext() {
 }
 
 function clearSidebarSearch() {
-  const {session, state} = info;
+  const {state} = info;
 
   if (state.stoppedTypingTimeout) {
     clearTimeout(state.stoppedTypingTimeout);
@@ -796,6 +798,7 @@ function clearSidebarSearch() {
   info.searchInput.value = '';
 
   state.searchStage = null;
+  state.justPerformedActiveQuery = false;
 
   clearActiveQuery();
 
@@ -1383,6 +1386,8 @@ function hideSidebarSearchResults() {
 
   cssProp(info.endSearchRule, 'display', 'none');
   cssProp(info.endSearchLine, 'display', 'none');
+
+  restoreSidebarSearchColumn();
 }
 
 function focusFirstSidebarSearchResult() {
@@ -1466,7 +1471,7 @@ function possiblyHideSearchSidebarColumn() {
 // This should be called after results are shown, since it checks the
 // elements added to understand the current search state.
 function tidySidebarSearchColumn() {
-  const {state} = info;
+  const {session, state} = info;
 
   // Don't *re-tidy* the sidebar if we've already tidied it to display
   // some results. This flag will get cleared if the search is dismissed
@@ -1475,17 +1480,24 @@ function tidySidebarSearchColumn() {
     return;
   }
 
-  const here = location.href.replace(/\/$/, '');
+  const hrefHere = location.href.replace(/\/$/, '');
   const currentPageIsResult =
     Array.from(info.results.querySelectorAll('a'))
       .some(link => {
-        const there = link.href.replace(/\/$/, '');
-        return here === there;
+        const hrefThere = link.href.replace(/\/$/, '');
+        return hrefHere === hrefThere;
       });
 
+  const currentPageIsContext =
+    location.pathname === session.activeQueryContextPagePathname;
+
   // Don't tidy the sidebar if you've navigated to some other page than
   // what's in the current result list.
-  if (!currentPageIsResult) {
+  if (
+    !state.justPerformedActiveQuery &&
+    !currentPageIsResult &&
+    !currentPageIsContext
+  ) {
     return;
   }