From 18fcc4c00f6a1c16768ca2edd378b8188e4c4d66 Mon Sep 17 00:00:00 2001
From: August Cayzer <a@cyzr.me>
Date: Sun, 25 Oct 2026 13:35:01 +0000
Subject: [PATCH] fix(site): keep a table's first column readable and draw
 tables with a hairline

---
 src/styles/app.css | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/styles/app.css b/src/styles/app.css
index e51a02a2..af94fecd 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -446,17 +446,36 @@ html > body[data-scroll-locked] {
 }
 
 /* ── Tables ───────────────────────────────────────────────────────────────
-   Table text is smaller than the body, so the body's line height makes a cell
-   that wraps read as double spaced; tables take a tighter one. Cells start at
-   the top, so a row reads from its first line. Inline code doesn't break inside
-   its box, where a break would split a name such as `/docs-map.md` at the
+   A table is a hairline-bordered container with a soft header and hairline
+   rules between rows, the same quiet surface as a code block. Table text is
+   smaller than the body, so the body's line height makes a cell that wraps
+   read as double spaced; tables take a tighter one. Cells start at the top,
+   so a row reads from its first line. Inline code doesn't break inside its
+   box, where a break would split a name such as `/docs-map.md` at the
    hyphen; the table scrolls sideways instead when a name can't fit. */
 .prose table {
+  border-radius: var(--radius-xl);
   line-height: 1.5;
 }
 .prose :is(th, td) {
   padding: 0.5rem 0.75rem;
   vertical-align: top;
+  border-inline-start-width: 0;
+}
+.prose thead th {
+  font-weight: 500;
+}
+
+/* The browser sizes columns by how much text each holds, so a long second
+   column leaves the first a sliver and a label such as "The owner" breaks
+   over two lines. A label column keeps a floor wide enough to read, and on a
+   phone the floor follows the screen so it stays near a third of the table
+   (a percentage min-width is ignored on a cell). A column of names in code is
+   already one line and sizes itself, so it is left alone. The header cell is
+   left out so a column of short values, such as exit codes, isn't widened by
+   its heading. */
+.prose td:first-child:not(:has(> code:only-child)) {
+  min-width: min(9rem, 35vw);
 }
 .prose :is(th, td) code {
   white-space: nowrap;