make toc srollable if its too long

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);

templates/note.html

@@ -12,9 +12,11 @@ $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>
+            <div class="toc-scroll">
                 $toc$
             </div>
         </div>
+    </div>
     <div class="text-space">
         <main role="main">
             <h1 class="pagetitle">$title$</h1>