From ef7ac618ade3bcc65c643dc89394a16bcac6ab75 Mon Sep 17 00:00:00 2001
From: Folyd <lyshuhow@gmail.com>
Date: Fri, 18 Nov 2022 12:17:05 +0800
Subject: [PATCH] Fix github release page TOC compatibility (#214)

---
 extension/script/github.css           | 11 ++-----
 extension/script/rust-lang-release.js | 46 +++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/extension/script/github.css b/extension/script/github.css
index f0de3f9..20019b1 100644
--- a/extension/script/github.css
+++ b/extension/script/github.css
@@ -24,20 +24,15 @@
 }
 
 @media screen and (min-width: 1280px) {
-    .rse-fix-readme {
-        display: flex;
-        padding-right: 0 !important;
-    }
-
     .rse-version-list {
         box-sizing: content-box;
         min-width: 200px;
-        border-left: var(--color-border-secondary) solid 1px;
+        border-left: var(--color-border-muted) solid 1px;
         margin-left: 1.5rem;
         max-height: 100vh;
         position: sticky;
-        /* 50px to fix compatibility of Github markdown file's sticky header*/
-        top: 50px;
+        /* 90px to fix compatibility of Github markdown file's sticky header*/
+        top: 90px;
         overflow: scroll !important;
         font-size: 13px;
         list-style: none;
diff --git a/extension/script/rust-lang-release.js b/extension/script/rust-lang-release.js
index 62b1785..4eabfe4 100644
--- a/extension/script/rust-lang-release.js
+++ b/extension/script/rust-lang-release.js
@@ -47,13 +47,55 @@ document.addEventListener("DOMContentLoaded", () => {
         ul.appendChild(item);
     });
 
-    let readme = document.querySelector(".readme");
-    readme.classList.add("rse-fix-readme");
+    let markdownBody = document.querySelector("article.markdown-body");
+    let readme = markdownBody.parentElement;
+    readme.setAttribute("style", "display: flex; padding-right: 0px !important");
     readme.appendChild(ul);
 
+    setTimeout(() => {
+        fixStickyNotWorking();
+        fixGithubTocCompatibility();
+    });
+
     highlight();
 });
 
+// https://michaelmovsesov.com/articles/fix-css-position-sticky-not-working
+function fixStickyNotWorking() {
+    let parent = document.querySelector('.rse-version-list').parentElement;
+
+    while (parent) {
+        const overflow = getComputedStyle(parent).overflow;
+        if (overflow !== 'visible') {
+            console.log(overflow, parent);
+            break;
+        }
+        parent = parent.parentElement;
+    }
+
+    if (parent) {
+        parent.setAttribute("style", "position:relative; z-index:0; overflow: visible");
+    }
+}
+
+// https://web.dev/resize-observer/
+function fixGithubTocCompatibility() {
+    let tocStickyHeader = document.querySelector("#repos-sticky-header");
+    if (tocStickyHeader) {
+        let toc = document.querySelector('.rse-version-list');
+        const observer = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                // Hide our TOC if we have no enough space.
+                if (entry.contentRect.width <= 1040) {
+                    toc.style.display = "none";
+                } else {
+                    toc.style.display = "block";
+                }
+            }
+        });
+        observer.observe(tocStickyHeader);
+    }
+}
 
 function scrollToVersion(version) {
     let versionElements = Array.from(document.querySelectorAll('.markdown-body>h1'));