Move ToC above article to avoid prose link styles, remove border

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: simonhamp

resources/views/components/plugin-toc.blade.php

@@ -15,21 +15,21 @@
     }"
     x-show="headings.length > 0"
     x-cloak
-    class="mb-4 rounded-2xl p-6"
+    class="mb-6"
 >
-    <h2 class="flex items-center gap-1.5 text-sm opacity-60">
+    <h3 class="flex items-center gap-1.5 text-sm opacity-60">
         <x-icons.stacked-lines class="size-[18px]" />
         <div>On this page</div>
-    </h2>
+    </h3>
 
-    <nav class="mt-4 flex flex-col space-y-2 overflow-y-auto overflow-x-hidden border-l text-xs dark:border-l-white/15">
+    <div class="mt-4 flex flex-col space-y-2 overflow-y-auto overflow-x-hidden border-l text-xs dark:border-l-white/15">
         <template x-for="heading in headings" :key="heading.id">
             <a
                 :href="'#' + heading.id"
                 :class="heading.level === 2 ? 'pb-1 pl-3' : 'py-1 pl-6'"
-                class="text-gray-600 transition duration-300 ease-in-out will-change-transform hover:translate-x-0.5 hover:text-indigo-500 hover:opacity-100 dark:text-white/80 dark:hover:text-indigo-400"
+                class="transition duration-300 ease-in-out will-change-transform hover:translate-x-0.5 hover:text-violet-400 hover:opacity-100 dark:text-white/80"
                 x-text="heading.text"
             ></a>
         </template>
-    </nav>
+    </div>
 </div>

resources/views/plugin-show.blade.php

@@ -96,31 +96,37 @@ class="font-mono text-2xl font-bold sm:text-3xl"
 
         <div class="mt-2 flex flex-col-reverse gap-8 lg:flex-row lg:items-start">
             {{-- Main content - README --}}
-            <article
-                x-init="
-                    () => {
-                        motion.inView($el, () => {
-                            gsap.fromTo(
-                                $el,
-                                { autoAlpha: 0, y: 5 },
-                                { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power1.out' },
-                            )
-                        })
-                    }
-                "
-                class="prose min-w-0 max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"
-                aria-labelledby="plugin-title"
-            >
+            <div class="min-w-0 grow">
                 @if ($plugin->readme_html)
-                    {!! $plugin->readme_html !!}
+                    <x-plugin-toc />
+                @endif
+
+                <article
+                    x-init="
+                        () => {
+                            motion.inView($el, () => {
+                                gsap.fromTo(
+                                    $el,
+                                    { autoAlpha: 0, y: 5 },
+                                    { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power1.out' },
+                                )
+                            })
+                        }
+                    "
+                    class="prose min-w-0 max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"
+                    aria-labelledby="plugin-title"
+                >
+                    @if ($plugin->readme_html)
+                        {!! $plugin->readme_html !!}
                 @else
                     <div class="rounded-xl border border-gray-200 bg-gray-50 p-8 text-center dark:border-gray-700 dark:bg-slate-800/50">
                         <p class="text-gray-500 dark:text-gray-400">
                             README not available yet.
                         </p>
                     </div>
-                @endif
-            </article>
+                    @endif
+                </article>
+            </div>
 
             {{-- Sidebar - Plugin details --}}
             <aside
@@ -137,11 +143,6 @@ class="prose min-w-0 max-w-none grow text-gray-600 dark:text-gray-400 dark:prose
                 "
                 class="w-full shrink-0 lg:sticky lg:top-24 lg:w-80"
             >
-                {{-- Table of Contents --}}
-                @if ($plugin->readme_html)
-                    <x-plugin-toc />
-                @endif
-
                 {{-- Purchase Box for Paid Plugins --}}
                 @if ($plugin->isPaid() && $bestPrice && $plugin->is_active)
                     <div class="mb-4 rounded-2xl border-2 border-indigo-500 bg-gradient-to-br from-indigo-50 to-purple-50 p-6 dark:border-indigo-400 dark:from-indigo-950/50 dark:to-purple-950/50">
@@ -342,6 +343,7 @@ class="size-10 shrink-0 rounded-lg object-cover"
                         </ul>
                     </div>
                 @endif
+
             </aside>
         </div>
     </section>