Fix sidebar jank on desktop.

2 files changed, 10 insertions, 1 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index 7f2ddd95..25a696ab 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -7,6 +7,11 @@ let settingsModal;
 let hamburgerToggle;
 let sidebar;
 
+function resizeSidebar() {
+  let rect = sidebar.getBoundingClientRect();
+  sidebar.style.height = `calc(100vh - 1em - ${rect.top + document.body.offsetTop}px)`;
+}
+
 function closeModal(modal) {
   activeModal = null;
   modal.hidden = true;
@@ -66,6 +71,8 @@ document.addEventListener('DOMContentLoaded', () => {
   hamburgerToggle = document.getElementById("hamburger-toggle");
   sidebar = document.getElementById("sidebar");
 
+  resizeSidebar();
+
   sidebar.addEventListener("click", (e) => {
     // If we click a navigation, close the hamburger menu
     if (e.target.tagName == "A" && sidebar.classList.contains("sidebar-toggle")) {
@@ -136,6 +143,8 @@ window.addEventListener('scroll', () => {
       activeLink.parentElement.classList.add('active');
     }
   }
+
+  resizeSidebar();
 });
 
 document.addEventListener('keydown', (event) => {
diff --git a/docs/_static/style.css b/docs/_static/style.css
index 66d0ea43..efb3d6cc 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -1093,7 +1093,7 @@ div.code-block-caption {
     display: inline-block;
     position: sticky;
     top: 1em;
-    max-height: calc(100vh - 1em);
+    max-height: calc(100vh - 2em);
     overflow-y: auto;
     margin: 1em;
   }