Show the timeline on when replies are present

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

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;

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)