fix: paper theme breadcrumbs and table overflow by rsbh · Pull Request #48 · raystack/chronicle

rsbh · 2026-05-07T05:52:18Z

Summary

Replace custom breadcrumb HTML with Apsara <Breadcrumb> component — fixes 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 in paper theme for visual separation
Fix table overflow in paper theme with horizontal scroll

Test plan

Open paper theme, navigate between pages — breadcrumbs should replace, not append
Check nested pages (e.g. Guides > Advanced > Deployment) show correct breadcrumb trail
Verify breadcrumb uses monospace font matching paper theme
Check sidebar nested folders have visual spacing
Verify wide tables scroll horizontally instead of overflowing

🤖 Generated with Claude Code

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>

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

vercel · 2026-05-07T05:52:23Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
chronicle	Ready	Preview, Comment	May 7, 2026 5:52am

coderabbitai · 2026-05-07T05:52:29Z

📝 Walkthrough

Summary by CodeRabbit

New Features
- Added responsive table styling with horizontal scrolling support on smaller screens.
Style
- Enhanced breadcrumb typography with improved font sizing and spacing.
- Applied distinct styling to nested folder items in chapter navigation for better visual hierarchy.

Walkthrough

The PR centralizes breadcrumb rendering logic from Page.tsx into a reusable Breadcrumbs component that accepts an optional className prop. Page derives a slug from the current pathname and renders breadcrumbs via the component instead of building them locally. Styling updates enhance breadcrumbs with consistent typography and add responsive table support. Navigation hierarchy improvements include subfolder-specific styling.

Changes

Breadcrumb Centralization and Navigation Styling

Layer / File(s)	Summary
Breadcrumbs Props Contract `packages/chronicle/src/components/ui/breadcrumbs.tsx`	`BreadcrumbsProps` interface extends to include optional `className?: string` field.
Breadcrumbs Component Implementation `packages/chronicle/src/components/ui/breadcrumbs.tsx`	`Breadcrumbs` destructures `className` from props and forwards it to the `Breadcrumb` component.
Page Component Integration `packages/chronicle/src/themes/paper/Page.tsx`	Imports are updated to remove `getBreadcrumbItems` and add `Breadcrumbs`. Slug is derived from `pathname`; `useMemo` is simplified to compute only `prev`/`next` navigation; breadcrumb `<nav>` is replaced with `<Breadcrumbs>` component invocation.
Breadcrumb and Table Styling `packages/chronicle/src/themes/paper/Page.module.css`	`.breadcrumb` rule adds mono font family, small sizing, and letter spacing. New `.content table` rule makes tables block-level with full width and horizontal scroll.
Subfolder Navigation Styling `packages/chronicle/src/themes/paper/ChapterNav.module.css`, `packages/chronicle/src/themes/paper/ChapterNav.tsx`	New `.subFolder` CSS class adds `margin-top` spacing; `ChapterNav` applies this class to nested folder `<li>` elements.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

raystack/chronicle#32: Both PRs refactor breadcrumb rendering and slug handling in the Page component.
raystack/chronicle#37: Both PRs modify breadcrumbs component implementation and its usage in Page.tsx.
raystack/chronicle#44: Both PRs update breadcrumb rendering logic and styling in the Page component.

Suggested reviewers

rohilsurana
rohanchkrabrty

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: replacing breadcrumbs with Apsara component and fixing table overflow in the paper theme.
Description check	✅ Passed	The description is well-detailed and directly related to the changeset, covering all major changes including breadcrumb replacement, className prop addition, nested folder styling, and table overflow fixes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix_paper_theme_breadcrumbs

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/chronicle/src/themes/paper/Page.tsx`:
- Line 29: The slug derivation can produce empty segments for paths with
trailing slashes (e.g., "/guides/"), causing breadcrumb URL mismatches; update
the logic that computes slug (the const slug variable that uses pathname) to
trim leading/trailing slashes and filter out empty parts after splitting (e.g.,
split on '/' and apply .filter(Boolean) or equivalent) while preserving the root
case so pathname === '/' still yields an empty array.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5e86d603-7bbd-4abb-90a9-6e79e8718fb0

📥 Commits

Reviewing files that changed from the base of the PR and between aab68a1 and 8384e15.

📒 Files selected for processing (5)

packages/chronicle/src/components/ui/breadcrumbs.tsx
packages/chronicle/src/themes/paper/ChapterNav.module.css
packages/chronicle/src/themes/paper/ChapterNav.tsx
packages/chronicle/src/themes/paper/Page.module.css
packages/chronicle/src/themes/paper/Page.tsx

coderabbitai · 2026-05-07T05:54:10Z

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

-  const { prev, next, crumbs } = useMemo(() => {
+  const slug = pathname === '/' ? [] : pathname.replace(/^\//, '').split('/');


⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Normalize slug segments to avoid trailing-slash breadcrumb mismatches.

At Line 29, splitting pathname directly can leave empty segments (/guides/), which may produce incorrect breadcrumb URLs. Filter empty parts when deriving slug.

Suggested fix

- const slug = pathname === '/' ? [] : pathname.replace(/^\//, '').split('/'); + const slug = + pathname === '/' + ? [] + : pathname.replace(/^\//, '').split('/').filter(Boolean);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

const slug = pathname === '/' ? [] : pathname.replace(/^\//, '').split('/');

const slug =

pathname === '/'

? []

: pathname.replace(/^\//, '').split('/').filter(Boolean);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/chronicle/src/themes/paper/Page.tsx` at line 29, The slug derivation can produce empty segments for paths with trailing slashes (e.g., "/guides/"), causing breadcrumb URL mismatches; update the logic that computes slug (the const slug variable that uses pathname) to trim leading/trailing slashes and filter out empty parts after splitting (e.g., split on '/' and apply .filter(Boolean) or equivalent) while preserving the root case so pathname === '/' still yields an empty array.

rsbh and others added 2 commits May 7, 2026 11:04

fix: paper theme table horizontal scroll on overflow

8384e15

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

vercel Bot deployed to Preview May 7, 2026 05:52 View deployment

rsbh requested a review from rohanchkrabrty May 7, 2026 05:52

rohanchkrabrty approved these changes May 7, 2026

View reviewed changes

coderabbitai Bot reviewed May 7, 2026

View reviewed changes

rsbh merged commit f0630e8 into main May 7, 2026
4 checks passed

coderabbitai Bot mentioned this pull request May 8, 2026

fix: paper theme skeleton loader and navbar improvements #52

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: paper theme breadcrumbs and table overflow#48

fix: paper theme breadcrumbs and table overflow#48
rsbh merged 2 commits intomainfrom
fix_paper_theme_breadcrumbs

rsbh commented May 7, 2026

Uh oh!

vercel Bot commented May 7, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 7, 2026 •

edited

Loading

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

❌ Failed checks (1 warning)

Review ran into problems

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot May 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

rsbh commented May 7, 2026

Summary

Test plan

Uh oh!

vercel Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

❌ Failed checks (1 warning)

Review ran into problems

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot May 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented May 7, 2026 •

edited

Loading

coderabbitai Bot commented May 7, 2026 •

edited

Loading