From 4476d45228d0f5360689f446569ae67e4ab5d14b Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Fri, 20 Feb 2026 13:01:11 +0100
Subject: [PATCH] Show the timeline on when replies are present

---
 src/lib/components/ThreadScrubber.svelte | 3 ++-
 src/routes/layout.css                    | 7 +++++++
 src/routes/thread/[id]/+page.svelte      | 6 +++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ThreadScrubber.svelte b/src/lib/components/ThreadScrubber.svelte
index a8543c9..daed377 100644
--- a/src/lib/components/ThreadScrubber.svelte
+++ b/src/lib/components/ThreadScrubber.svelte
@@ -22,6 +22,7 @@
   let dragStartY = 0;
   let dragStartScrollTop = 0;
 
+  const isOverflowing = $derived(scrollHeight > clientHeight);
   const maxScroll = $derived(Math.max(scrollHeight - clientHeight, 1));
   const thumbHeight = $derived(
     Math.max((clientHeight / scrollHeight) * trackHeight, 28),
@@ -130,7 +131,7 @@
 
 <div
   class="sticky self-start flex-shrink-0 flex flex-col items-end select-none pt-1"
-  style="top: calc({topOffset}px - 1.5rem); height: 50vh; width: 72px;"
+  style="top: calc({topOffset}px - 1.5rem); height: 50vh; width: 72px; visibility: {isOverflowing ? 'visible' : 'hidden'}; pointer-events: {isOverflowing ? 'auto' : 'none'};"
   aria-hidden="true"
 >
   <!-- First post date -->
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 471bcea..b2b1b28 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -10,6 +10,13 @@ body {
   background-color: var(--color-gray-100);
 }
 
+.no-scrollbar {
+  scrollbar-width: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 @theme {
   --color-brand: #e32a6d;
   --color-brand-hover: #c4205a;
diff --git a/src/routes/thread/[id]/+page.svelte b/src/routes/thread/[id]/+page.svelte
index bdf4e3f..bcb839e 100644
--- a/src/routes/thread/[id]/+page.svelte
+++ b/src/routes/thread/[id]/+page.svelte
@@ -26,11 +26,15 @@
   onMount(() => {
     const main = document.querySelector("main");
     if (!main) return;
+    main.classList.add("no-scrollbar");
     const onScroll = () => {
       isScrolled = main.scrollTop > 0;
     };
     main.addEventListener("scroll", onScroll, { passive: true });
-    return () => main.removeEventListener("scroll", onScroll);
+    return () => {
+      main.classList.remove("no-scrollbar");
+      main.removeEventListener("scroll", onScroll);
+    };
   });
 
   // Measure OP's natural distance from main's border top (once after DOM is ready)