added copy page button & fixed TOC alignment

Author: waleed

apps/docs/app/global.css

@@ -36,7 +36,9 @@
   /* Shift the sidebar slightly left from the content edge for extra breathing room */
   --sidebar-shift: 90px;
   --sidebar-offset: max(0px, calc(var(--edge-gutter) - var(--sidebar-shift)));
-  --toc-offset: var(--edge-gutter);
+  /* Shift TOC slightly right to match sidebar spacing for symmetry */
+  --toc-shift: 90px;
+  --toc-offset: max(0px, calc(var(--edge-gutter) - var(--toc-shift)));
   /* Sidebar and TOC have 20px internal padding - navbar accounts for this directly */
   /* Extra gap between sidebar/TOC and the main text content */
   --content-gap: 1.75rem;
@@ -107,8 +109,21 @@ aside#nd-sidebar {
   aside#nd-sidebar {
     left: var(--sidebar-offset) !important;
   }
-  [data-toc] {
-    margin-right: var(--toc-offset) !important;
+  /* TOC positioning - target all possible selectors */
+  [data-toc],
+  aside[data-toc],
+  div[data-toc],
+  .fd-toc,
+  #nd-toc,
+  nav[data-toc],
+  aside:has([role="complementary"]) {
+    right: var(--toc-offset) !important;
+  }
+
+  /* Alternative TOC container targeting */
+  [data-docs-page] > aside:last-child,
+  main ~ aside {
+    right: var(--toc-offset) !important;
   }
 }
 

apps/docs/components/navbar/navbar.tsx

@@ -19,13 +19,13 @@ export function Navbar() {
       {/* Desktop: Single row layout */}
       <div className='hidden h-16 w-full items-center lg:flex'>
         <div
-          className='grid w-full grid-cols-[auto_1fr_auto] items-center'
+          className='relative flex w-full items-center justify-between'
           style={{
             paddingLeft: 'calc(var(--sidebar-offset) + 20px)',
-            paddingRight: 'calc(var(--toc-offset) + 20px)',
+            paddingRight: 'calc(var(--toc-offset) + 60px)',
           }}
         >
-          {/* Left cluster: translate by sidebar delta to align with sidebar edge */}
+          {/* Left cluster: logo */}
           <div className='flex items-center'>
             <Link href='/' className='flex min-w-[100px] items-center'>
               <Image
@@ -38,12 +38,12 @@ export function Navbar() {
             </Link>
           </div>
 
-          {/* Center cluster: search */}
-          <div className='flex flex-1 items-center justify-center pl-32'>
+          {/* Center cluster: search - absolutely positioned to center */}
+          <div className='-translate-x-1/2 absolute left-1/2 flex items-center justify-center'>
             <SearchTrigger />
           </div>
 
-          {/* Right cluster aligns with TOC edge using the same right gutter */}
+          {/* Right cluster aligns with TOC edge */}
           <div className='flex items-center gap-4'>
             <Link
               href='https://sim.ai'

apps/docs/components/ui/copy-page-button.tsx

@@ -23,7 +23,7 @@ export function CopyPageButton({ content }: CopyPageButtonProps) {
   return (
     <button
       onClick={handleCopy}
-      className='flex items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm shadow-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+      className='flex items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
       aria-label={copied ? 'Copied to clipboard' : 'Copy page content'}
     >
       {copied ? (