Skip to content

fix(site): keep a table's first column readable and draw tables with a hairline - #641

Merged
aicayzer merged 1 commit into
mainfrom
ui/tables
Oct 25, 2026
Merged

aicayzer merged 1 commit into
mainfrom
ui/tables

Conversation

@aicayzer

@aicayzer aicayzer commented Oct 25, 2026 •

Copy link
Copy Markdown
Contributor

Summary

A table's first column no longer shrinks to a sliver beside a long second column, and tables are drawn with the same quiet surface as the new code blocks. The change is CSS only in src/styles/app.css; no page changes and the Markdown copies are unaffected.

Changes

  • A first-column text cell has a floor of min(9rem, 35vw). The browser sizes columns by how much text each holds, so a long second column left labels such as "The owner" 71px wide and broke them over two lines. The 35vw limit keeps the floor near a third of the table on a phone. A percentage min-width is ignored on a table cell, so the limit uses the viewport.
  • A column whose cells are only inline code is left alone, and so is the header cell. Those columns already stay on one line and size themselves.
  • The table has a hairline border with rounded-xl corners, a soft header fill, header text in medium weight, and hairline rules between rows. The vertical rules between columns are removed. Cell padding is unchanged and wide tables still scroll sideways.

Testing

Measured every table on the 74 written pages in llms.txt (52 pages hold tables, 136 tables in all) at 1280px in Chromium, live site against this branch. A table is flagged when its first column wraps to three lines or more, or is under 110px with text cells.

Viewport Flagged before Flagged after
1280px, Chromium 14 7
390px, Chromium 28 14
1280px, Firefox and WebKit (after only) 6 and 9

The 7 left at 1280px have a first column of long sentences (for example "What the page sees") that is already 174 to 357px wide, so the floor cannot help them.

Also run: pnpm build, pnpm build:status and pnpm types:check, all passing. Looked at in light, dark and phone width: folder safeguards, install, access, CLI, catalog, deploy, glossary, Swift SDK and the media type page. No automated test: this is styling only.

Not tested: Safari on a device, and a before measurement in Firefox and WebKit.

Notes for reviewers

  • A column of short plain text, such as the exit codes on the CLI page, also gets the 144px floor (it was 59px). CSS cannot tell a short plain cell from a short label, so that table has a wider first column than it needs.
  • Dropping the column rules is a judgment call and one line to revert (border-inline-start-width: 0).
  • Pull requests that also edit src/styles/app.css in other sections are open; this one touches only the tables section.

Checklist

  • The title is a scoped Conventional Commit.
  • New behavior has a test that was seen failing first, or no test was needed and the reason is above.
  • Docs, comments and the contract still say what is true after this change.

@aicayzer aicayzer left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review: checks only

Styling change, looked at in the browser by the builder and again by the session; build, type check and tests pass.

@aicayzer
aicayzer marked this pull request as ready for review October 25, 2026 16:30
@aicayzer
aicayzer merged commit f80de47 into main Oct 25, 2026
7 checks passed
@aicayzer
aicayzer deleted the ui/tables branch October 25, 2026 16:32
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