UI: Improve edit on GitHub button

.changeset/popular-deers-tan.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Improve edit on GitHub button

apps/docs/content/docs/ui/blocks/page.mdx

@@ -185,7 +185,7 @@ const time = await getGithubLastEdit({
 
 ### Edit on GitHub
 
-A shortcut to add "Edit on GitHub" button to TOC footer.
+Add "Edit on GitHub" button to the page.
 
 ```tsx
 import { DocsPage } from 'fumadocs-ui/page';

apps/docs/content/docs/ui/index.mdx

@@ -162,15 +162,15 @@ When using the official Tailwind CSS plugin, it will not be able to find the fil
 
 To fix this, edit the Tailwind CSS configuration and replace `./node_modules` with `../../node_modules` in the `content` section.
 
-```diff
+```js
 export default {
   content: [
--   './node_modules/fumadocs-ui/dist/**/*.js',
-+   '../../node_modules/fumadocs-ui/dist/**/*.js',
+    './node_modules/fumadocs-ui/dist/**/*.js', // [!code --]
+    '../../node_modules/fumadocs-ui/dist/**/*.js', // [!code ++]
     './components/**/*.{ts,tsx}',
-    ...
+    // ...
   ],
-}
+};
 ```
 
     </Accordion>

packages/ui/src/components/layout/edit-on-github.tsx

@@ -37,12 +37,13 @@ const EditOnGitHub = forwardRef<HTMLAnchorElement, EditOnGitHubOptions>(
         className={cn(
           buttonVariants({
             color: 'outline',
-            className: 'text-fd-muted-foreground text-xs p-1.5 gap-2',
+            className:
+              'text-fd-muted-foreground bg-fd-secondary/50 px-2 py-1.5 gap-2 rounded-lg',
           }),
           props.className,
         )}
       >
-        <Edit className="size-3.5" />
+        <Edit className="size-4" />
         {text.editOnGithub}
       </a>
     );

packages/ui/src/components/layout/search-toggle.tsx

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, useCallback } from 'react';
+import { type ButtonHTMLAttributes } from 'react';
 import { SearchIcon } from 'lucide-react';
 import { useSearchContext } from '@/contexts/search';
 import { useI18n } from '@/contexts/i18n';
@@ -22,9 +22,9 @@ export function SearchToggle(
       )}
       data-search=""
       aria-label="Open Search"
-      onClick={useCallback(() => {
+      onClick={() => {
         setOpenSearch(true);
-      }, [setOpenSearch])}
+      }}
     >
       <SearchIcon />
     </button>
@@ -46,9 +46,9 @@ export function LargeSearchToggle(
         'inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground',
         props.className,
       )}
-      onClick={useCallback(() => {
+      onClick={() => {
         setOpenSearch(true);
-      }, [setOpenSearch])}
+      }}
     >
       <SearchIcon className="ms-1 size-4" />
       {text.search}

packages/ui/src/components/layout/sidebar.tsx

@@ -113,10 +113,17 @@ export function Sidebar({
         blockScrollingWidth={768} // md
         {...props.aside}
         className={cn(
-          'fixed z-30 flex flex-col bg-fd-card text-sm md:sticky md:top-fd-sidebar-top md:h-fd-sidebar-height md:w-[var(--fd-c-sidebar)] md:min-w-[var(--fd-sidebar-width)] md:border-e md:ps-[calc(var(--fd-c-sidebar)-var(--fd-sidebar-width))]',
+          'fixed z-30 flex flex-col bg-fd-card text-sm md:sticky md:top-fd-sidebar-top md:h-fd-sidebar-height md:w-[var(--fd-c-sidebar)] md:min-w-[var(--fd-sidebar-width)] md:border-e md:ps-[var(--fd-sidebar-offset)]',
           'max-md:inset-0 max-md:top-fd-sidebar-top max-md:bg-fd-background/80 max-md:pt-[var(--fd-nav-height)] max-md:text-[15px] max-md:backdrop-blur-md max-md:data-[open=false]:invisible',
           props.aside?.className,
         )}
+        style={
+          {
+            ...props.aside?.style,
+            '--fd-sidebar-offset':
+              'calc(var(--fd-c-sidebar) - var(--fd-sidebar-width))',
+          } as object
+        }
       >
         {hasSearch || props.banner ? (
           <div

packages/ui/src/components/layout/toc.tsx

@@ -32,10 +32,16 @@ export function Toc({ header, footer, children }: TOCProps): ReactElement {
   return (
     <div
       data-toc=""
-      className="sticky top-fd-toc-top flex w-[var(--fd-c-toc)] min-w-[var(--fd-toc-width)] flex-col gap-4 pe-[max(calc(var(--fd-c-toc)-var(--fd-toc-width)),0.75rem)] pt-12 max-lg:hidden md:h-fd-toc-height"
+      className="sticky top-fd-toc-top flex w-[var(--fd-c-toc)] min-w-[var(--fd-toc-width)] flex-col gap-3 pb-2 pe-[var(--fd-toc-offset)] pt-12 max-lg:hidden md:h-fd-toc-height"
+      style={
+        {
+          '--fd-toc-offset':
+            'max(calc(var(--fd-c-toc) - var(--fd-toc-width)), 0.75rem)',
+        } as object
+      }
     >
       {header}
-      <h3 className="-mb-1 -ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground">
+      <h3 className="-ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground">
         <Text className="size-4" />
         {text.toc}
       </h3>

packages/ui/src/page.tsx

@@ -91,22 +91,6 @@ export function DocsPage({
     ...props.tableOfContent,
   };
 
-  if (props.editOnGithub) {
-    tocOptions.footer = (
-      <>
-        {tocOptions.footer}
-        <EditOnGitHub {...props.editOnGithub} />
-      </>
-    );
-
-    tocPopoverOptions.footer = (
-      <>
-        {tocPopoverOptions.footer}
-        <EditOnGitHub {...props.editOnGithub} />
-      </>
-    );
-  }
-
   return (
     <AnchorProvider toc={toc} single={tocOptions.single}>
       <div
@@ -142,10 +126,14 @@ export function DocsPage({
         <article className="flex flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12">
           {replaceOrDefault(breadcrumb, <Breadcrumb {...breadcrumb} />)}
           {props.children}
-          <div className="mt-auto" />
-          {props.lastUpdate ? (
-            <LastUpdate date={new Date(props.lastUpdate)} />
-          ) : null}
+          <div className="mt-auto flex flex-row flex-wrap items-center justify-between gap-1.5 empty:hidden">
+            {props.editOnGithub ? (
+              <EditOnGitHub {...props.editOnGithub} />
+            ) : null}
+            {props.lastUpdate ? (
+              <LastUpdate date={new Date(props.lastUpdate)} />
+            ) : null}
+          </div>
           {replaceOrDefault(footer, <Footer items={footer.items} />)}
         </article>
       </div>

packages/ui/src/tailwind-plugin.ts

@@ -135,7 +135,7 @@ export const docsUi = plugin.withOptions<DocsUIOptions>(
           '--fd-c-sidebar': 'var(--fd-sidebar-width)',
 
           '--fd-diff-remove-color': 'rgba(200,10,100,0.12)',
-          '--fd-diff-remove-symbol-color': 'rgb(200,10,100)',
+          '--fd-diff-remove-symbol-color': 'rgb(230,10,100)',
           '--fd-diff-add-color': 'rgba(14,180,100,0.12)',
           '--fd-diff-add-symbol-color': 'rgb(10,200,100)',
         },