Skip to content

Commit f0630e8

Browse files
rsbhclaude
andauthored
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>
1 parent aab68a1 commit f0630e8

5 files changed

Lines changed: 16 additions & 51 deletions

File tree

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ import { Link as RouterLink } from 'react-router'
88
interface BreadcrumbsProps {
99
slug: string[]
1010
tree: Root
11+
className?: string
1112
}
1213

13-
export function Breadcrumbs({ slug, tree }: BreadcrumbsProps) {
14+
export function Breadcrumbs({ slug, tree, className }: BreadcrumbsProps) {
1415
const url = slug.length === 0 ? '/' : `/${slug.join('/')}`
1516
const items = getBreadcrumbItems(url, tree, { includePage: true })
1617

1718
if (items.length === 0) return null
1819

1920
return (
20-
<Breadcrumb size="small">
21+
<Breadcrumb size="small" className={className}>
2122
{items.flatMap((item, index) => {
2223
const isCurrent = index === items.length - 1
2324
const breadcrumbItem = (

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@
6565
flex-shrink: 0;
6666
}
6767

68+
.subFolder {
69+
margin-top: var(--rs-space-5);
70+
}
71+
6872
.subLabel {
6973
font-family: var(--paper-font-mono);
7074
font-size: var(--rs-font-size-small);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ function ChapterItem({
6767

6868
if (item.type === 'folder') {
6969
return (
70-
<li>
70+
<li className={styles.subFolder}>
7171
<span className={styles.subLabel}>{item.name}</span>
7272
<ul className={styles.chapterItems}>
7373
{item.children.map(child => (

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

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -68,34 +68,12 @@
6868
}
6969

7070
.breadcrumb {
71-
display: flex;
72-
align-items: center;
7371
font-family: var(--paper-font-mono);
7472
font-size: var(--rs-font-size-small);
7573
line-height: var(--rs-line-height-small);
7674
letter-spacing: var(--rs-letter-spacing-small);
7775
}
7876

79-
.separator {
80-
margin: 0 var(--rs-space-1);
81-
color: var(--rs-color-foreground-base-tertiary);
82-
}
83-
84-
.crumbLink {
85-
color: var(--rs-color-foreground-base-tertiary);
86-
font-weight: var(--rs-font-weight-medium);
87-
text-decoration: none;
88-
}
89-
90-
.crumbLink:hover {
91-
color: var(--rs-color-foreground-base-primary);
92-
}
93-
94-
.crumbActive {
95-
color: var(--rs-color-foreground-base-primary);
96-
font-weight: var(--rs-font-weight-medium);
97-
}
98-
9977
.article {
10078
flex: 1;
10179
min-width: 0;
@@ -219,6 +197,9 @@
219197
}
220198

221199
.content table {
200+
display: block;
201+
width: 100%;
202+
overflow-x: auto;
222203
margin-bottom: var(--rs-space-5);
223204
}
224205

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

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
ArrowLeftIcon,
33
ArrowRightIcon,
4-
ChevronRightIcon,
54
AdjustmentsHorizontalIcon,
65
EyeIcon,
76
SunIcon,
@@ -11,8 +10,8 @@ import {
1110
import { IconButton, useTheme } from '@raystack/apsara';
1211
import { useEffect, useMemo, useState } from 'react';
1312
import { Link as RouterLink, useLocation } from 'react-router';
14-
import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb';
1513
import { flattenTree } from 'fumadocs-core/page-tree';
14+
import { Breadcrumbs } from '@/components/ui/breadcrumbs';
1615
import type { ThemePageProps } from '@/types';
1716
import styles from './Page.module.css';
1817
import { useReaderMode } from './ReaderModeContext';
@@ -27,21 +26,14 @@ export function Page({ page, tree }: ThemePageProps) {
2726

2827
useEffect(() => { setIsClient(true); }, []);
2928

30-
const { prev, next, crumbs } = useMemo(() => {
29+
const slug = pathname === '/' ? [] : pathname.replace(/^\//, '').split('/');
30+
31+
const { prev, next } = useMemo(() => {
3132
const pages = flattenTree(tree.children);
3233
const currentIndex = pages.findIndex(p => p.url === pathname);
33-
const breadcrumbItems = getBreadcrumbItems(
34-
pathname,
35-
tree,
36-
{ includePage: true }
37-
);
3834
return {
3935
prev: currentIndex > 0 ? pages[currentIndex - 1] : null,
4036
next: currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null,
41-
crumbs: breadcrumbItems.map(item => ({
42-
label: item.name,
43-
href: item.url ?? pathname,
44-
})),
4537
};
4638
}, [tree, pathname]);
4739

@@ -70,20 +62,7 @@ export function Page({ page, tree }: ThemePageProps) {
7062
</span>
7163
)}
7264
</div>
73-
<nav className={styles.breadcrumb}>
74-
{crumbs.map((crumb, i) => (
75-
<span key={crumb.href}>
76-
{i > 0 && <ChevronRightIcon width={12} height={12} className={styles.separator} />}
77-
{i === crumbs.length - 1 ? (
78-
<span className={styles.crumbActive}>{crumb.label}</span>
79-
) : (
80-
<RouterLink to={crumb.href} className={styles.crumbLink}>
81-
{crumb.label}
82-
</RouterLink>
83-
)}
84-
</span>
85-
))}
86-
</nav>
65+
<Breadcrumbs slug={slug} tree={tree} className={styles.breadcrumb} />
8766
</div>
8867
<div className={styles.navRight}>
8968
{settingsOpen ? (

0 commit comments

Comments
 (0)