fix: paper theme breadcrumbs and table overflow (#48)

* fix: paper theme breadcrumbs and sidebar nested folder spacing

Replace custom breadcrumb HTML with Apsara Breadcrumb component to fix
duplicate key bug causing breadcrumbs to append instead of replacing on
navigation. Add className prop to shared Breadcrumbs component for theme
customization. Add top margin to nested sidebar folders for visual separation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: paper theme table horizontal scroll on overflow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rsbh

packages/chronicle/src/components/ui/breadcrumbs.tsx

@@ -8,16 +8,17 @@ import { Link as RouterLink } from 'react-router'
 interface BreadcrumbsProps {
   slug: string[]
   tree: Root
+  className?: string
 }
 
-export function Breadcrumbs({ slug, tree }: BreadcrumbsProps) {
+export function Breadcrumbs({ slug, tree, className }: BreadcrumbsProps) {
   const url = slug.length === 0 ? '/' : `/${slug.join('/')}`
   const items = getBreadcrumbItems(url, tree, { includePage: true })
 
   if (items.length === 0) return null
 
   return (
-    <Breadcrumb size="small">
+    <Breadcrumb size="small" className={className}>
       {items.flatMap((item, index) => {
         const isCurrent = index === items.length - 1
         const breadcrumbItem = (

packages/chronicle/src/themes/paper/ChapterNav.module.css

@@ -65,6 +65,10 @@
   flex-shrink: 0;
 }
 
+.subFolder {
+  margin-top: var(--rs-space-5);
+}
+
 .subLabel {
   font-family: var(--paper-font-mono);
   font-size: var(--rs-font-size-small);

packages/chronicle/src/themes/paper/ChapterNav.tsx

@@ -67,7 +67,7 @@ function ChapterItem({
 
   if (item.type === 'folder') {
     return (
-      <li>
+      <li className={styles.subFolder}>
         <span className={styles.subLabel}>{item.name}</span>
         <ul className={styles.chapterItems}>
           {item.children.map(child => (

packages/chronicle/src/themes/paper/Page.module.css

@@ -68,34 +68,12 @@
 }
 
 .breadcrumb {
-  display: flex;
-  align-items: center;
   font-family: var(--paper-font-mono);
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
 }
 
-.separator {
-  margin: 0 var(--rs-space-1);
-  color: var(--rs-color-foreground-base-tertiary);
-}
-
-.crumbLink {
-  color: var(--rs-color-foreground-base-tertiary);
-  font-weight: var(--rs-font-weight-medium);
-  text-decoration: none;
-}
-
-.crumbLink:hover {
-  color: var(--rs-color-foreground-base-primary);
-}
-
-.crumbActive {
-  color: var(--rs-color-foreground-base-primary);
-  font-weight: var(--rs-font-weight-medium);
-}
-
 .article {
   flex: 1;
   min-width: 0;
@@ -219,6 +197,9 @@
 }
 
 .content table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
   margin-bottom: var(--rs-space-5);
 }
 

packages/chronicle/src/themes/paper/Page.tsx

@@ -1,7 +1,6 @@
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
-  ChevronRightIcon,
   AdjustmentsHorizontalIcon,
   EyeIcon,
   SunIcon,
@@ -11,8 +10,8 @@ import {
 import { IconButton, useTheme } from '@raystack/apsara';
 import { useEffect, useMemo, useState } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router';
-import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb';
 import { flattenTree } from 'fumadocs-core/page-tree';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
 import { useReaderMode } from './ReaderModeContext';
@@ -27,21 +26,14 @@ export function Page({ page, tree }: ThemePageProps) {
 
   useEffect(() => { setIsClient(true); }, []);
 
-  const { prev, next, crumbs } = useMemo(() => {
+  const slug = pathname === '/' ? [] : pathname.replace(/^\//, '').split('/');
+
+  const { prev, next } = useMemo(() => {
     const pages = flattenTree(tree.children);
     const currentIndex = pages.findIndex(p => p.url === pathname);
-    const breadcrumbItems = getBreadcrumbItems(
-      pathname,
-      tree,
-      { includePage: true }
-    );
     return {
       prev: currentIndex > 0 ? pages[currentIndex - 1] : null,
       next: currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null,
-      crumbs: breadcrumbItems.map(item => ({
-        label: item.name,
-        href: item.url ?? pathname,
-      })),
     };
   }, [tree, pathname]);
 
@@ -70,20 +62,7 @@ export function Page({ page, tree }: ThemePageProps) {
                 </span>
               )}
             </div>
-            <nav className={styles.breadcrumb}>
-              {crumbs.map((crumb, i) => (
-                <span key={crumb.href}>
-                  {i > 0 && <ChevronRightIcon width={12} height={12} className={styles.separator} />}
-                  {i === crumbs.length - 1 ? (
-                    <span className={styles.crumbActive}>{crumb.label}</span>
-                  ) : (
-                    <RouterLink to={crumb.href} className={styles.crumbLink}>
-                      {crumb.label}
-                    </RouterLink>
-                  )}
-                </span>
-              ))}
-            </nav>
+            <Breadcrumbs slug={slug} tree={tree} className={styles.breadcrumb} />
           </div>
           <div className={styles.navRight}>
             {settingsOpen ? (