Skip to content

Let short tables fill the prose width - #386

Open
MaggieAppleton wants to merge 1 commit into
mainfrom
design/table-fill-width
Open

MaggieAppleton wants to merge 1 commit into
mainfrom
design/table-fill-width

Conversation

@MaggieAppleton

Copy link
Copy Markdown
Collaborator

Design decision for review. This changes how every table of up to six columns is laid out, including existing authored ones, and it sits next to the table alignment work in #287. It was split out of #382 so it can be judged separately.

Why

A new table from /Table is a 3×3 grid at about half the prose width, and short authored tables do the same. The design audit (editor finding 13) asked for new tables to use the full width.

What changed

  • Tables now span the prose measure (CSS only, in packages/editor/src/styles.css). The rows sit in an anonymous table box that shrinks to fit its columns, so each column in a table of up to six asks for an equal share of the table's width through a container query (100cqi / N, where N comes from :has() on the row).
  • Tables with seven or more columns behave as before: at their 7rem minimum they already fill or overflow the measure.
  • Long content still widens its own column, and the table scrolls as before. On a phone the 7rem minimum still applies, so nothing changes there.
  • This applies to every table, not only new ones. Limiting it to empty tables would make a table shrink back as soon as you type in it. The trade-off is that short authored tables lose their content-hugging width and get equal columns.

Screenshots

Before: an authored table and a new table

Before

After

After

Testing

  • bun run ci: passes, including the design contract
  • bun run build: initial bundle unchanged at 246661 B
  • Checked in the browser at 1440×900. Both tables are 537px wide with no horizontal overflow; before, they were 337px.

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@MaggieAppleton

Copy link
Copy Markdown
Collaborator Author

Hold — design decision for Maggie. This changes the layout of every existing short table; please don't merge until Maggie has decided.

🤖 Generated with Claude Code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant