From d8d8e276879e79d190b6ecef4fafd2425fe21622 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Mon, 25 May 2026 19:10:36 +0100
Subject: [PATCH] Review scrolling behavior

---
 src/lib/components/ChatSidebar.svelte |  4 ++--
 src/lib/components/LeftSidebar.svelte |  2 +-
 src/routes/+layout.svelte             | 24 ++++++++++++++++++------
 src/routes/+page.svelte               |  2 +-
 src/routes/thread/[id]/+page.svelte   |  2 --
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/ChatSidebar.svelte b/src/lib/components/ChatSidebar.svelte
index 90fe62d..a4b3123 100644
--- a/src/lib/components/ChatSidebar.svelte
+++ b/src/lib/components/ChatSidebar.svelte
@@ -146,7 +146,7 @@
 
 <aside
   bind:this={asideEl}
-  class="flex-1 flex-col bg-white px-4 pt-4 pb-20 md:absolute md:top-2 md:right-0 md:z-10 md:h-[calc(100%-0.5rem)] md:flex-none md:rounded-tl-xl md:px-6 md:py-6 md:transition-all md:duration-200 min-[1540px]:rounded-tr-xl
+  class="flex-1 flex-col bg-white px-4 pt-4 pb-20 md:absolute md:top-6 md:right-0 md:z-10 md:h-[calc(100%-1.5rem)] md:flex-none md:rounded-tl-xl md:px-6 md:py-6 md:transition-all md:duration-200 min-[1540px]:rounded-tr-xl
 		{mobileActive ? 'flex' : 'hidden'} md:flex
 		{expanded ? 'md:w-150 md:shadow-2xl' : 'md:w-80 md:shadow-lg'}"
 >
@@ -181,7 +181,7 @@
   <div
     bind:this={listEl}
     onscroll={onListScroll}
-    class="-mr-6 flex flex-1 flex-col overflow-y-auto pr-6"
+    class="no-scrollbar -mr-6 flex flex-1 flex-col overflow-y-auto pr-6"
   >
     {#if messages.length === 0}
       <div class="m-auto py-8 text-center text-sm text-neutral-400">
diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte
index 59894a8..0186320 100644
--- a/src/lib/components/LeftSidebar.svelte
+++ b/src/lib/components/LeftSidebar.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <aside
-  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pl-8 pr-1 pb-8 md:flex"
+  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pl-8 pr-1 pb-8 md:flex md:pt-6"
 >
   <div>
     <a
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 141421e..31ecdfa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -95,26 +95,33 @@
 </svelte:head>
 
 <div
-  class="mx-auto flex max-w-[1540px] flex-col md:h-screen md:overflow-hidden md:pt-4 {mobileView ===
+  class="mx-auto flex max-w-[1540px] flex-col md:h-screen md:overflow-hidden {mobileView ===
   'chat'
     ? 'h-dvh overflow-hidden'
     : ''}"
 >
   <Navbar onMenuToggle={() => (menuOpen = true)} />
   <div
-    class="relative md:flex md:flex-1 md:overflow-hidden md:gap-5 md:pt-2 {mobileView ===
+    class="relative md:flex md:flex-1 md:overflow-hidden md:gap-5 {mobileView ===
     'chat'
       ? 'flex flex-1 overflow-hidden'
       : ''}"
   >
     <LeftSidebar {mode} {activeRoom} {activeResource} {contactsActive} />
     <main
-      class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-8 pb-20 shadow-lg md:min-h-0 md:overflow-y-auto md:rounded-t-xl md:px-10 md:pt-6 {showDiscussions
+      class="no-scrollbar md:min-h-0 md:overflow-y-auto {showDiscussions
         ? 'md:flex-[3]'
         : 'md:flex-1'}
 			{mobileView === 'chat' ? 'hidden md:block' : 'block'}"
     >
-      {@render children()}
+      <!-- Gray top margin lives inside the scroll area, so scrolling collapses
+           it first and it reappears once the top is reached. Desktop only. -->
+      <div class="hidden md:block md:h-6" aria-hidden="true"></div>
+      <div
+        class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-8 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-10 md:pt-6"
+      >
+        {@render children()}
+      </div>
     </main>
     {#if showChat}
       <div class="hidden w-80 shrink-0 md:block" aria-hidden="true"></div>
@@ -127,9 +134,14 @@
       <!-- Own panel (40%) so the gray gutter matches the main↔chat gap.
            Hidden on mobile — it's supplementary to the main column. -->
       <div
-        class="hidden min-w-0 bg-white px-6 pt-8 pb-20 shadow-lg md:mt-0 md:block md:flex-[2] md:overflow-y-auto md:rounded-t-xl md:px-8 md:pt-6"
+        class="no-scrollbar hidden min-w-0 md:block md:flex-[2] md:min-h-0 md:overflow-y-auto"
       >
-        <LatestDiscussions />
+        <div class="hidden md:block md:h-6" aria-hidden="true"></div>
+        <div
+          class="bg-white px-6 pt-8 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-8 md:pt-6"
+        >
+          <LatestDiscussions />
+        </div>
       </div>
     {/if}
   </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b2e17b1..670a756 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,7 +51,7 @@
 {/snippet}
 
 {#if partial}
-  <div class="mt-4 mb-8">
+  <div class="mt-2 mb-8">
     <PostContent content={partial.content} headingOffset={0} />
   </div>
 {/if}
diff --git a/src/routes/thread/[id]/+page.svelte b/src/routes/thread/[id]/+page.svelte
index b6b2108..1ea9738 100644
--- a/src/routes/thread/[id]/+page.svelte
+++ b/src/routes/thread/[id]/+page.svelte
@@ -126,7 +126,6 @@
   onMount(() => {
     const main = document.querySelector("main");
     if (!main) return;
-    main.classList.add("no-scrollbar");
     const onScroll = () => {
       isScrolled = main.scrollTop > 0;
       if (selectionTarget) selectionTarget = null;
@@ -184,7 +183,6 @@
     document.addEventListener("selectionchange", onSelectionChange);
 
     return () => {
-      main.classList.remove("no-scrollbar");
       main.removeEventListener("scroll", onScroll);
       window.removeEventListener("scroll", onWinScroll);
       document.removeEventListener("selectionchange", onSelectionChange);