From f226f440a5235fe2cb94412614dc758aae7a6b68 Mon Sep 17 00:00:00 2001
From: Yu Cong <sxlxcsxlxc@gmail.com>
Date: Mon, 23 Mar 2026 13:28:51 +0800
Subject: [PATCH] make toc srollable if its too long

---
 css/default.css     | 35 +++++++++++++++++++++++++++++++++++
 templates/note.html |  6 ++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/css/default.css b/css/default.css
index b3d7e67..5f51dcb 100644
--- a/css/default.css
+++ b/css/default.css
@@ -615,12 +615,17 @@ hr {
     div#contents-big {
         position: sticky;
         top: 6rem;
+        max-height: calc(100vh - 7rem);
+        max-height: calc(100dvh - 7rem);
         left: 100%;
         clear: both;
+        display: flex;
+        flex-direction: column;
         max-width: 68%;
         margin-right: 4em;
         padding: 0.8rem 1.15rem 0.9rem 1.45rem;
         background-color: var(--color-surface);
+        background-clip: padding-box;
         border: 1px solid var(--color-border);
         border-radius: 1.25rem;
         box-shadow: var(--color-shadow-soft);
@@ -629,6 +634,36 @@ hr {
         text-align: left;
     }
 
+    div#contents-big .toc-scroll {
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-gutter: stable;
+        scrollbar-width: thin;
+        scrollbar-color: var(--color-border-strong) transparent;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar {
+        width: 0.7rem;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar-track {
+        margin-block: 0.45rem;
+        background: transparent;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar-thumb {
+        background-color: var(--color-border-strong);
+        border: 0.18rem solid transparent;
+        border-radius: 999px;
+        background-clip: content-box;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar-thumb:hover {
+        background-color: var(--color-tag1);
+    }
+
     div#contents-big .mini-header {
         margin: 0 0 0.45rem;
         color: var(--color-tag1);
diff --git a/templates/note.html b/templates/note.html
index 0bc9a6f..89cd0c1 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -12,7 +12,9 @@ $partial("templates/head.html")$
         <div id="contents-big">
             <p class="mini-header">Notes <a id="up-arrow" href="/">←</a></p>
             <p class="mini-header">Contents <a id="up-arrow" href="#">↑</a></p>
-            $toc$
+            <div class="toc-scroll">
+                $toc$
+            </div>
         </div>
     </div>
     <div class="text-space">
@@ -38,4 +40,4 @@ $partial("templates/head.html")$
     </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>