client, css: tweak sticky behavior of column showing search results

2 files changed, 17 insertions, 5 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index ef697db2..0dadf2e2 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -471,6 +471,12 @@ summary .group-name {
   font-weight: normal;
 }
 
+.sidebar-column.search-showing-results {
+  position: sticky;
+  top: 5px;
+  align-self: flex-start !important; /* pls */
+}
+
 .wiki-search-sidebar-box {
   padding: 1px 0 0 0;
 
@@ -490,18 +496,22 @@ summary .group-name {
 }
 
 .wiki-search-sidebar-box.showing-results {
-  position: sticky;
-  top: 5px;
-
   box-shadow:
     0 4px 16px -8px var(--primary-color),
     0 10px 6px var(--bg-black-color),
     0 6px 4px #00000040;
 }
 
+/* This is to say, any sidebar that's *not*
+ * the first sidebar after the search box.
+ */
+.wiki-search-sidebar-box.showing-results + .sidebar ~ .sidebar {
+  margin-top: 5px;
+}
+
 .wiki-search-sidebar-box.showing-results ~ .sidebar:not(:hover) {
-  opacity: 0.6;
-  filter: brightness(0.5);
+  opacity: 0.8;
+  filter: brightness(0.7);
 }
 
 .wiki-search-input {
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 74240b0d..e60d200a 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -4082,6 +4082,7 @@ function clearSidebarSearch() {
   }
 
   info.searchBox.classList.remove('showing-results');
+  info.searchSidebarColumn.classList.remove('search-showing-results');
 
   info.searchInput.value = '';
 
@@ -4203,6 +4204,7 @@ function showSidebarSearchResults(results) {
         })));
 
   info.searchBox.classList.add('showing-results');
+  info.searchSidebarColumn.classList.add('search-showing-results');
 
   while (info.results.firstChild) {
     info.results.firstChild.remove();