From f0b2d7684a25ce12f71f64c6ada5f2d391f58abd Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Thu, 18 Jun 2026 02:34:16 +0100
Subject: [PATCH] fix(toc): make post sidebar scroll independently with fade-in
 scrollbar

cap .post-sidebar height to the viewport below the sticky header so a
long table of contents scrolls on its own instead of pushing past the
fold. scrollbar is hidden at rest and fades in on hover/focus-within
via scrollbar-color (firefox) and ::-webkit-scrollbar-thumb (chrome/
safari), using --color-text-400 to match existing muted-accent tokens.
---
 src/lib/styles/pages.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/lib/styles/pages.css b/src/lib/styles/pages.css
index d9abff9..38e5db7 100644
--- a/src/lib/styles/pages.css
+++ b/src/lib/styles/pages.css
@@ -443,8 +443,38 @@
     position: sticky;
     top: 104px; /* Slightly lower to provide margin from header */
     height: max-content;
+    max-height: calc(100vh - 104px - var(--space-lg));
+    overflow-y: auto;
     min-width: 0;
     contain-intrinsic-size: auto 150px;
+
+    /* Overlay-style scrollbar: invisible until hovered/focused */
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  .post-sidebar:hover,
+  .post-sidebar:focus-within {
+    scrollbar-color: var(--color-text-400) transparent;
+  }
+
+  .post-sidebar::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .post-sidebar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .post-sidebar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: var(--radius-full);
+    transition: background-color var(--duration-normal) var(--ease-out-quart);
+  }
+
+  .post-sidebar:hover::-webkit-scrollbar-thumb,
+  .post-sidebar:focus-within::-webkit-scrollbar-thumb {
+    background-color: var(--color-text-400);
   }
 
   .post-body {
-- 
2.51.2