githubnext/chopinPublic

Let's compose rich plans together

Let short tables fill the prose width #386

MergedMaggieAppletonmerged 2 commits intomainfromrefs/pull/386/head
  1. MA

    > **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](https://github.com/user-attachments/assets/5db2e9fb-32c3-4f74-a9b8-3a9c317e43f7)

    After

    ![After](https://github.com/user-attachments/assets/cf4e458c-68c4-4c85-be0a-3fd473e25274)

    ## 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](https://claude.com/claude-code)

  2. MaggieAppletonreferenced this in Make tabs authorable in place and label empty table headers #382last month on GitHub

  3. MA
    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](https://claude.com/claude-code)

  4. MaggieAppletonauto-rebase-enabledlast month on GitHub

  5. MaggieAppletonmerged 1278b566bcb3last month on GitHub

  6. MaggieAppletonclosedlast month on GitHub

  7. MaggieAppletonhead-ref-deletedlast month on GitHub