From 016b3531351b040aedb0a5178b978caa7af3e0ea Mon Sep 17 00:00:00 2001 From: Rishabh Date: Wed, 20 May 2026 16:22:20 +0530 Subject: [PATCH 1/2] fix: use display table to fit columns within content width Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/chronicle/src/themes/default/Page.module.css | 4 ++-- packages/chronicle/src/themes/paper/Page.module.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/chronicle/src/themes/default/Page.module.css b/packages/chronicle/src/themes/default/Page.module.css index e8e78cd..b47af79 100644 --- a/packages/chronicle/src/themes/default/Page.module.css +++ b/packages/chronicle/src/themes/default/Page.module.css @@ -81,8 +81,8 @@ } .content table { - display: block; - max-width: 100%; + display: table; + width: 100%; overflow-x: auto; margin-bottom: var(--rs-space-5); } diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css index ff5d0ed..906b90f 100644 --- a/packages/chronicle/src/themes/paper/Page.module.css +++ b/packages/chronicle/src/themes/paper/Page.module.css @@ -198,7 +198,7 @@ } .content table { - display: block; + display: table; width: 100%; overflow-x: auto; margin-bottom: var(--rs-space-5); From 130290b9f4fe7c7b58ddb425c10be272b56ff2b6 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Wed, 20 May 2026 16:28:57 +0530 Subject: [PATCH 2/2] fix: table-layout fixed with cell wrap and top alignment Override Apsara cell overflow/nowrap to allow multiline content. Add wide table example for testing. Co-Authored-By: Claude Opus 4.6 (1M context) --- examples/basic/content/docs/index.mdx | 11 +++++++++++ packages/chronicle/src/themes/default/Page.module.css | 11 ++++++++++- packages/chronicle/src/themes/paper/Page.module.css | 11 ++++++++++- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/examples/basic/content/docs/index.mdx b/examples/basic/content/docs/index.mdx index a970585..450435a 100644 --- a/examples/basic/content/docs/index.mdx +++ b/examples/basic/content/docs/index.mdx @@ -104,6 +104,17 @@ chronicle dev | email | string | Email address | | active | bool | Account status | +### Wide Table + +| Name | Type | Default | Required | Description | Example | Notes | +|------|------|---------|----------|-------------|---------|-------| +| id | number | auto | yes | Unique identifier for the resource | 42 | Auto-incremented | +| name | string | none | yes | Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor | John Doe | Must be unique across all tenants in the system | +| email | string | none | yes | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip | john@example.com | Validated against RFC 5322 format specification | +| role | string | viewer | no | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat | admin | One of: admin, editor, viewer, guest, superadmin | +| created_at | datetime | now | no | Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt | 2024-01-15T10:30:00Z | ISO 8601 format with timezone offset required | +| metadata | object | empty | no | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque | key-value pairs | Max 10 keys allowed per resource entity | + ## Horizontal Rule --- diff --git a/packages/chronicle/src/themes/default/Page.module.css b/packages/chronicle/src/themes/default/Page.module.css index b47af79..0282c5c 100644 --- a/packages/chronicle/src/themes/default/Page.module.css +++ b/packages/chronicle/src/themes/default/Page.module.css @@ -82,11 +82,20 @@ .content table { display: table; + table-layout: fixed; width: 100%; - overflow-x: auto; margin-bottom: var(--rs-space-5); } +.content table td, +.content table th { + overflow: visible; + white-space: normal; + text-overflow: unset; + word-wrap: break-word; + vertical-align: top; +} + .content details { border: 1px solid var(--rs-color-border-base-primary); border-radius: var(--rs-radius-2); diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css index 906b90f..465719a 100644 --- a/packages/chronicle/src/themes/paper/Page.module.css +++ b/packages/chronicle/src/themes/paper/Page.module.css @@ -199,11 +199,20 @@ .content table { display: table; + table-layout: fixed; width: 100%; - overflow-x: auto; margin-bottom: var(--rs-space-5); } +.content table td, +.content table th { + overflow: visible; + white-space: normal; + text-overflow: unset; + word-wrap: break-word; + vertical-align: top; +} + .content [role="tablist"] { margin-bottom: var(--rs-space-3); }