fix: fit tables within content width

[rsbh]

Summary

• Change display: block to display: table for tables in both default and paper themes
• Tables now constrain columns within content area instead of overflowing

Test plan

• Check tables in default theme — all columns visible without horizontal scroll
• Check tables in paper theme — same behavior
• Verify tables with many columns still render readable

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
chronicle	Ready	Preview, Comment	May 21, 2026 8:16am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c6993b05-a043-4f3a-a37e-7e5a500ff63a

📥 Commits

Reviewing files that changed from the base of the PR and between 016b353 and 23df8be.

📒 Files selected for processing (3)

• examples/basic/content/docs/index.mdx
• packages/chronicle/src/themes/default/Page.module.css
• packages/chronicle/src/themes/paper/Page.module.css

---

📝 Walkthrough

Summary by CodeRabbit

• Style

  • Improved table layout and display across themes with enhanced cell text wrapping, alignment, and overflow handling for better readability.

• Documentation

  • Added example demonstrating wide table formatting with extended columns and fields.

Walkthrough

CSS table layout changed in both default and paper themes from block to table with fixed layout and full width; new td/th rules relax truncation and enable normal wrapping. The docs site gains a “Wide Table” example demonstrating larger tables.

Changes

Table layout & cell wrapping

Layer / File(s)	Summary
Default theme: table layout and cell rules packages/chronicle/src/themes/default/Page.module.css	.content table now uses display: table, table-layout: fixed, width: 100%; .content table td, .content table th added to set overflow: visible, white-space: normal, text-overflow: unset, word-wrap: break-word, and vertical-align: top.
Paper theme: table layout and cell rules packages/chronicle/src/themes/paper/Page.module.css	Same changes as default: .content table → display: table with table-layout: fixed and width: 100%; add td/th rules to normalize wrapping and overflow and set top vertical alignment.
Docs: wide table example examples/basic/content/docs/index.mdx	Insert a “Wide Table” section with an expanded markdown table (columns: Default, Required, Example, Notes) and rows for fields like id, name, email, role, created_at, metadata.

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• raystack/chronicle#96: The main PR; both adjust .content table display/width and cell behavior in theme Page.module.css.
• raystack/chronicle#48: Prior edits to paper theme table CSS affecting overflow/layout in Page.module.css.

Suggested reviewers

• paanSinghCoder
• rohanchkrabrty

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: modifying table display styling to fit within content width.
Description check	✅ Passed	The description is directly related to the changeset, explaining the CSS modifications to table display properties and their intended effect.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/table-fit-content

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 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/default/Page.module.css`:
- Around line 84-86: In Page.module.css remove the overflow-x: auto from the
rule that sets display: table and width: 100% (the selector that currently
contains "display: table; width: 100%; overflow-x: auto;"), create a new
block-level wrapper class (e.g. .tableWrapper) that has overflow-x: auto and
optionally -webkit-overflow-scrolling: touch, keep the table rule as display:
table; width: 100%;, and update the component/JSX that renders the table to wrap
it in a <div> with that wrapper class (e.g. <div
className={styles.tableWrapper}>…<table
className={styles.yourTableClass}>...</table>…</div>).

In `@packages/chronicle/src/themes/paper/Page.module.css`:
- Around line 201-203: The rule that sets display: table; width: 100%;
overflow-x: auto should be split: remove overflow-x: auto from the element
currently styled as display: table and instead wrap the table in a scrollable
container (e.g., add a .tableWrapper or similar) and apply overflow-x: auto to
that wrapper while leaving display: table and width: 100% on the table itself;
update the corresponding selector in Page.module.css and make the same change in
the default theme to restore horizontal scrolling for wide tables.

🪄 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: ba8282f2-05f8-4cc0-b037-e00fecfd8f7c

📥 Commits

Reviewing files that changed from the base of the PR and between 9acd409 and 016b353.

📒 Files selected for processing (2)

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