From d4484c2c24540e0d0d7cc8497d6eb965a88c79cd Mon Sep 17 00:00:00 2001 From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com> Date: Thu, 8 Oct 2026 02:59:37 +0100 Subject: [PATCH] Let short tables fill the prose width Co-Authored-By: Claude Opus 5.5 --- packages/editor/src/styles.css | 46 +++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css index 39be44467..b988ed8eb 100644 --- a/packages/editor/src/styles.css +++ b/packages/editor/src/styles.css @@ -1338,13 +1338,47 @@ } /* - * A compact table shrink-wraps around its columns from the prose's start edge, - * like every other block; a wide one scrolls inside the prose measure. The row - * and column rails are fixed overlays and sit in the gutter outside it. + * A table spans the prose measure like the paragraphs around it; a wide one + * scrolls inside it. The row and column rails are fixed overlays and sit in the + * gutter outside it. + * + * The rows live in an anonymous table box that shrink-wraps its columns, so a + * few short columns would stop halfway across. Each column of a table with up + * to six asks for an equal share of the measure (the container) instead; six + * columns at their minimum already fill it. Longer content still widens its own + * column and the table scrolls. */ -.plan-content > table { - inline-size: max-content; - max-inline-size: 100%; +.plan-content table { + container-type: inline-size; +} + +.plan-content table tr > :is(th, td) { + /* Less one hairline, which the collapsed outer borders add to the sum. */ + min-inline-size: max(7rem, (100cqi - 1px) / var(--plan-table-columns, 7)); +} + +.plan-content table tr:has(> :last-child:nth-child(1)) { + --plan-table-columns: 1; +} + +.plan-content table tr:has(> :last-child:nth-child(2)) { + --plan-table-columns: 2; +} + +.plan-content table tr:has(> :last-child:nth-child(3)) { + --plan-table-columns: 3; +} + +.plan-content table tr:has(> :last-child:nth-child(4)) { + --plan-table-columns: 4; +} + +.plan-content table tr:has(> :last-child:nth-child(5)) { + --plan-table-columns: 5; +} + +.plan-content table tr:has(> :last-child:nth-child(6)) { + --plan-table-columns: 6; } /* The paragraph owns the wide row; the image keeps its intrinsic size inside it. */