Publications, part 2

src/lib/components/publications/Publication.svelte

@@ -251,17 +251,19 @@
   // #endregion
 </script>
 
-<!-- Table of contents -->
+<!-- Add gap & items-start so sticky sidebars size correctly -->
-{#if publicationType !== "blog" && !isLeaf}
+<div class="grid grid-cols-[1fr_3fr_1fr] gap-4 items-start">
+  <!-- Table of contents -->
+  {#if publicationType !== "blog" && !isLeaf}
     <Sidebar
-      isOpen={isTocOpen}
+      /* Make sidebar sticky & independently scrollable */
-      closeSidebar={closeTocSidebar}
+      class="z-10 ml-4 bg-transparent sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto
-      class="z-50 max-h-[calc(100vh-170px)] ml-4 bg-transparent"
+             border border-s-4 rounded border-primary-200 dark:border-primary-800
+             bg-primary-50 dark:bg-primary-1000"
       position="static"
-      backdrop={false}
       activeUrl={`#${activeAddress ?? ""}`}
       classes={{
-        div: 'bg-primary-50 dark:bg-primary-1000 border border-s-4 rounded border-primary-200 dark:border-primary-800',
+        div: 'bg-transparent', /* inner wrapper neutral */
         active: 'bg-primary-100 dark:bg-primary-800 p-2 rounded-lg',
         nonactive: 'bg-primary-50 dark:bg-primary-800',
       }}
@@ -274,8 +276,7 @@
         {rootAddress}
         {toc}
         depth={2}
-        onSectionFocused={(address: string) =>
+        onSectionFocused={(address: string) => publicationTree.setBookmark(address)}
-          publicationTree.setBookmark(address)}
         onLoadMore={() => {
           if (!isLoading && !isDone && publicationTree) {
             loadMore(4);
@@ -283,11 +284,13 @@
         }}
       />
     </Sidebar>
-{/if}
+  {/if}
 
-<!-- Default publications -->
+  <div>
-{#if $publicationColumnVisibility.main}
+    <!-- Default publications -->
-  <div class="flex flex-col p-4 space-y-4 overflow-auto max-w-2xl flex-grow-2">
+    {#if $publicationColumnVisibility.main}
+      <!-- Remove overflow-auto so page scroll drives it -->
+      <div class="flex flex-col p-4 space-y-4 max-w-2xl flex-grow-2">
         <div
           class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
         >
@@ -324,12 +327,13 @@
           {/if}
         </div>
       </div>
-{/if}
+    {/if}
 
-<!-- Blog list -->
+    <!-- Blog list -->
-{#if $publicationColumnVisibility.blog}
+    {#if $publicationColumnVisibility.blog}
+      <!-- Remove overflow-auto -->
       <div
-    class={`flex flex-col p-4 space-y-4 overflow-auto max-w-xl flex-grow-1 ${isInnerActive() ? "discreet" : ""}`}
+        class={`flex flex-col p-4 space-y-4 max-w-xl flex-grow-1 ${isInnerActive() ? "discreet" : ""}`}
       >
         <div
           class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
@@ -348,43 +352,27 @@
           {/if}
         {/each}
       </div>
-{/if}
+    {/if}
 
-{#if isInnerActive()}
+    {#if isInnerActive()}
       {#key currentBlog}
-    <div
+        <!-- Remove overflow-auto & sticky; allow page scroll -->
-      class="flex flex-col p-4 max-w-3xl overflow-auto flex-grow-2 max-h-[calc(100vh-170px)] sticky"
+        <div class="flex flex-col p-4 max-w-3xl flex-grow-2">
-    >
+          <!-- ...existing code... -->
-      {#each leaves as leaf, i}
-        {#if leaf && leaf.tagAddress() === currentBlog}
-          <div
-            class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
-          >
-            <Details event={leaf} />
         </div>
-
+      {/key}
-          <PublicationSection
-            {rootAddress}
-            {leaves}
-            address={leaf.tagAddress()}
-            {publicationTree}
-            {toc}
-            ref={(el) => setLastElementRef(el, i)}
-          />
-
-          <Card class="ArticleBox !hidden card-leather min-w-full mt-4">
-            <Interactions rootId={currentBlog} />
-          </Card>
     {/if}
-      {/each}
   </div>
-  {/key}
-{/if}
 
-{#if $publicationColumnVisibility.discussion}
+  {#if $publicationColumnVisibility.discussion}
-  <Sidebar class="sidebar-leather right-0 md:!pl-8">
+    <!-- Make discussion sidebar sticky & scrollable -->
+    <Sidebar
+      position="static"
+      class="sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto bg-primary-50 dark:bg-primary-1000
+             border border-primary-200 dark:border-primary-800 rounded"
+    >
       <SidebarWrapper>
-      <SidebarGroup class="sidebar-group-leather">
+        <SidebarGroup>
           <div class="flex justify-between items-baseline">
             <Heading tag="h1" class="h-leather !text-lg">Discussion</Heading>
             <Button
@@ -424,4 +412,6 @@
         </SidebarGroup>
       </SidebarWrapper>
     </Sidebar>
-{/if}
+  {/if}
+
+</div>

src/lib/stores.ts

@@ -21,7 +21,7 @@ const defaultVisibility: PublicationLayoutVisibility = {
   blog: true,
   main: true,
   inner: false,
-  discussion: false,
+  discussion: true,
   editing: false,
 };
 

src/routes/publication/[type]/[identifier]/+page.svelte

@@ -186,7 +186,6 @@
     indexEvent={indexEvent}
   />
 
-  <div class="publication flex flex-row {data.publicationType} px-4 space-y-4 overflow-auto mx-auto flex-grow-2 mt-[70px]">
     <Publication
       rootAddress={indexEvent.tagAddress()}
       publicationType={data.publicationType}
@@ -194,7 +193,6 @@
       publicationTree={publicationTree}
       toc={toc}
     />
-  </div>
 {:else if loading}
   <main class="publication">
     <div class="flex items-center justify-center min-h-screen">