Tweaks

src/app.css

@@ -657,7 +657,7 @@
 
   /* Table of Contents highlighting */
   .toc-highlight {
-    @apply bg-primary-200 dark:bg-primary-700 border-s-4 border-primary-600
+    @apply bg-primary-300 dark:bg-primary-700 border-s-4 border-primary-600
       rounded dark:border-primary-400 font-medium;
     transition: all 0.2s ease-in-out;
   }

src/lib/components/publications/Publication.svelte

@@ -267,12 +267,12 @@
       {#if publicationType !== "blog" && !isLeaf}
         {#if $publicationColumnVisibility.toc}
           <Sidebar
-            class="z-10 ml-2 fixed top-[162px] max-h-[calc(100vh-165px)] overflow-y-auto dark:bg-primary-800 bg-primary-50 rounded"
+            class="z-10 ml-2 fixed top-[162px] max-h-[calc(100vh-165px)] overflow-y-auto dark:bg-primary-900 bg-primary-50 rounded"
             activeUrl={`#${activeAddress ?? ""}`}
             classes={{
-          div: 'dark:bg-primary-800 bg-primary-50',
+          div: 'dark:bg-primary-900 bg-primary-50',
           active: 'bg-primary-100 dark:bg-primary-800 p-2 rounded-lg',
-          nonactive: 'bg-primary-50 dark:bg-primary-800',
+          nonactive: 'bg-primary-50 dark:bg-primary-900',
         }}
           >
             <SidebarWrapper>

src/lib/components/publications/PublicationHeader.svelte

@@ -49,7 +49,7 @@
 </script>
 
 {#if title != null && href != null}
-  <Card class="ArticleBox card-leather w-full relative flex flex-col sm:flex-row sm:space-x-2 overflow-hidden">
+  <Card class="ArticleBox max-h-52 card-leather w-full relative flex flex-col sm:flex-row sm:space-x-2 overflow-hidden">
     <!-- Image block: full width on mobile, fixed side on md+ -->
     <div class="w-full sm:min-w-40 sm:w-40 overflow-hidden flex items-center justify-center sm:rounded-l rounded-t sm:rounded-t-none">
       {#if image}
@@ -68,7 +68,7 @@
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col min-w-0 p-3 sm:p-2 w-full">
+    <div class="flex flex-col min-w-0 p-3 sm:p-2 w-full gap-2">
       <a href="/{href}" class="flex flex-col space-y-2 flex-1 min-w-0 overflow-hidden decoration-none hover:underline">
         <div class="min-w-0">
           <h2 class="text-lg font-bold line-clamp-2 break-words overflow-hidden decoration-none" {title}>{title}</h2>

src/lib/components/publications/TableOfContents.svelte

@@ -158,13 +158,12 @@
     {@const expanded = toc.expandedMap.get(address) ?? false}
     {@const isLeaf = toc.leaves.has(address)}
     {@const isVisible = isEntryVisible(address)}
-    {@const isLastEntry = index === entries.length - 1}
     {#if isLeaf}
       <SidebarItem
         label={entry.title}
         href={`#${address}`}
         spanClass="px-2 text-ellipsis"
-        class={`${isVisible ? "toc-highlight" : ""} ${isLastEntry ? "pb-4" : ""}`}
+        class={`${isVisible ? "toc-highlight" : ""} `}
         onclick={() => handleSectionClick(address)}
       >
         <!-- Empty for now - could add icons or labels here in the future -->
@@ -173,7 +172,7 @@
       {@const childDepth = depth + 1}
       <SidebarDropdownWrapper
         label={entry.title}
-        btnClass="flex items-center p-2 w-full font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-primary-50 dark:text-white dark:hover:bg-primary-800 {isVisible ? 'toc-highlight' : ''} {isLastEntry ? 'pb-4' : ''}"
+        btnClass="flex items-center p-2 w-full font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-primary-50 dark:text-white dark:hover:bg-primary-800 {isVisible ? 'toc-highlight' : ''} "
         bind:isOpen={() => expanded, (open) => setEntryExpanded(address, open)}
       >
         <Self rootAddress={address} depth={childDepth} {toc} {onSectionFocused} {onLoadMore} />