Review scrolling behavior

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

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

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>

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}

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