2 files changed, 58 insertions, 7 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 {