fix blog-view

restore toc/article expansion
make collapsed cards less prominent
make entire expanded card clickable
responsive layout, for small screens

src/lib/components/cards/BlogHeader.svelte

@@ -87,12 +87,31 @@
 </script>
 
 {#if title != null}
-  <Card
-    class="ArticleBox card-leather w-full grid max-w-xl {active
-      ? 'active'
-      : ''}"
+  {#if active}
+    <!-- Full card view when active -->
+    <div
+      class="ArticleBox card-leather w-full grid active cursor-pointer min-w-0"
+      role="button"
+      tabindex={0}
+      onclick={(e: MouseEvent) => {
+        // Don't trigger if clicking on CardActions or its children
+        const target = e.target as HTMLElement;
+        if (target.closest('.card-actions') || target.closest('button[type="button"]')) {
+          return;
+        }
+        showBlog();
+      }}
+      onkeydown={(e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          const target = e.target as HTMLElement;
+          if (!target.closest('.card-actions') && !target.closest('button[type="button"]')) {
+            showBlog();
+          }
+        }
+      }}
     >
-    <div class="space-y-4 relative">
+      <Card class="w-full h-full min-w-0 !max-w-none">
+      <div class="space-y-4 relative pl-4 min-w-0 w-full">
         <div class="flex flex-row justify-between my-2">
           <div class="flex flex-col">
             {@render userBadge(authorPubkey, author, ndk)}
@@ -121,9 +140,7 @@
         </div>
         
         <div class="flex flex-col space-y-4">
-        <button onclick={() => showBlog()} class="text-left">
           <h2 class="text-lg font-bold line-clamp-2" {title}>{title}</h2>
-        </button>
           {#if hashtags}
             <div class="tags">
               {#each hashtags as tag}
@@ -133,14 +150,40 @@
           {/if}
         </div>
         
-      {#if active}
         <Interactions {rootId} {event} />
-      {/if}
         
         <!-- Position CardActions at bottom-right -->
-      <div class="absolute bottom-2 right-2">
+        <div 
+          class="absolute bottom-2 right-2 card-actions"
+          role="button"
+          tabindex={0}
+          onclick={(e) => e.stopPropagation()}
+          onkeydown={(e) => e.stopPropagation()}
+        >
           <CardActions {event} onDelete={handleDelete} />
         </div>
       </div>
       </Card>
+    </div>
+  {:else}
+    <!-- Simple list view when collapsed -->
+    <div
+      class="py-2 pl-4 border-b border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+      role="button"
+      tabindex="0"
+      onclick={() => showBlog()}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          showBlog();
+        }
+      }}
+    >
+      <h3 class="text-base font-medium text-gray-900 dark:text-white">{title}</h3>
+      <div class="flex items-center gap-2 mt-1">
+        <p class="text-sm text-gray-500 dark:text-gray-400">{publishedAt()}</p>
+        <span class="text-sm text-gray-400 dark:text-gray-500">•</span>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{author}</p>
+      </div>
+    </div>
+  {/if}
 {/if}

src/lib/components/publications/Publication.svelte

@@ -240,11 +240,12 @@
   }
 
   function loadBlog(rootId: string) {
-    // depending on the size of the screen, also toggle blog list & discussion visibility
+    // depending on the size of the screen, also toggle discussion visibility
     publicationColumnVisibility.update((current) => {
       const updated = current;
       if (window.innerWidth < 1024) {
-        updated.blog = false;
+        // Don't set blog = false on mobile - we need it to show the article
+        // The blog list is already hidden via CSS (hidden md:flex)
         updated.discussion = false;
       }
       updated.inner = true;
@@ -659,11 +660,14 @@
         </div>
       {/if}
 
-      <!-- Blog list -->
+      <!-- Blog view: two-column layout on desktop, single column on mobile -->
       {#if $publicationColumnVisibility.blog}
-        <!-- Remove overflow-auto -->
+        <div class="flex flex-col md:flex-row gap-4 w-full">
+          <!-- Blog list: centered when no article, left when article is open -->
           <div
-          class={`flex flex-col p-4 space-y-4 max-w-xl flex-grow-1 ${isInnerActive() ? "discreet" : ""}`}
+            class={`flex flex-col p-4 space-y-4 ${isInnerActive()
+              ? 'md:flex-shrink-0 md:w-[500px]'
+              : 'mx-auto md:mx-auto max-w-3xl'} ${isInnerActive() ? 'hidden md:flex' : ''}`}
           >
             <div
               class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
@@ -682,17 +686,34 @@
               {/if}
             {/each}
           </div>
-      {/if}
 
+          <!-- Selected article: right column on desktop, replaces TOC on mobile -->
           {#if isInnerActive()}
             {#key currentBlog}
-          <!-- Remove overflow-auto & sticky; allow page scroll -->
-          <div class="flex flex-col p-4 max-w-3xl flex-grow-2">
-            <!-- ...existing code... -->
+              <div class="flex flex-col p-4 max-w-3xl md:flex-grow min-w-0 mx-auto md:mx-0">
+                {#if currentBlogEvent && currentBlog}
+                  {@const address = currentBlog}
+                  <PublicationSection
+                    {rootAddress}
+                    {leaves}
+                    {address}
+                    {publicationTree}
+                    {toc}
+                    allComments={comments}
+                    {commentsVisible}
+                    ref={(el) => onPublicationSectionMounted(el, address)}
+                  />
+                {:else}
+                  <div class="text-center py-8">
+                    <p class="text-gray-500 dark:text-gray-400">Loading article...</p>
+                  </div>
+                {/if}
               </div>
             {/key}
           {/if}
         </div>
+      {/if}
+    </div>
   </div>
 </div>
 

src/lib/components/util/ArticleNav.svelte

@@ -93,6 +93,16 @@
     });
   }
 
+  function handleBlogTocClick() {
+    if ($publicationColumnVisibility.inner) {
+      // Viewing article: go back to TOC
+      backToBlog();
+    } else if ($publicationColumnVisibility.blog) {
+      // Showing TOC: toggle it (though it should stay visible)
+      toggleColumn("blog");
+    }
+  }
+
   function handleScroll() {
     if (window.innerWidth < 768) {
       const currentScrollY = window.scrollY;
@@ -160,11 +170,13 @@
     <div class="flex items-center space-x-2 md:min-w-52 min-w-8">
       {#if isIndexEvent}
         {#if publicationType === "blog"}
+          <!-- Blog view: disabled when showing blog list, active when viewing article -->
           <Button
-            class={`btn-leather !w-auto ${$publicationColumnVisibility.blog ? "active" : ""}`}
+            class={`btn-leather !w-auto ${$publicationColumnVisibility.inner ? "active" : ""}`}
             outline={true}
-            onclick={() => toggleColumn("blog")}
-            title="Table of Contents"
+            disabled={$publicationColumnVisibility.blog && !$publicationColumnVisibility.inner}
+            onclick={handleBlogTocClick}
+            title={$publicationColumnVisibility.inner ? "Back to Table of Contents" : "Table of Contents"}
           >
             <BookOutline class="!fill-none" />
           </Button>