jig-ui 0.26.1 → 0.26.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.26.2 (2026-10-13)
+
+A button in a table row keeps the row's height, and the render probe reports
+rows it stretches.
+
+### Fixed
+
+- **A button in a table row takes the row's height.** 0.26.0 said so in the
+  tokens chapter, but the Button pattern, which an agent reads to build a
+  button, still gave its hit area a 48px floor with no exception, and an
+  invoices table on 0.26.1 had its "Mark as paid" rows at 65px among 41px ones.
+  The Button and Data table patterns now say it where buttons are built: a
+  button in a row is sized to the control height with no minimum of its own,
+  and on a touch screen the whole row rises to the touch target instead. On a
+  run of this release, every row stood 36px with a mouse and 48px on touch.
+
+### Added
+
+- **The render probe reports a table whose rows are not one height because of
+  a control.** When the rows holding a button or link stand taller than the
+  rest, and the control is taller than the short rows, it is a measured
+  failure (`P-02`, `P-06`). Rows that differ only because text wraps are left
+  alone.
+
 ## 0.26.1 (2026-10-13)
 
 The colour and typeface you decide in `/jig decide` now reach the pages, and

package/dist/index.js

@@ -6633,6 +6633,25 @@ var PROBE_SCRIPT = `(async () => {
     if (!table || getComputedStyle(table).display !== 'table' || display === 'table-cell' || display === 'none' || !vis(cell)) continue;
     brokenCells.push({ cell: cell.tagName.toLowerCase() + (cell.classList[0] ? '.' + cell.classList[0] : ''), text: (cell.innerText || '').trim().replace(/\\s+/g, ' ').slice(0, 40), display });
   }
+  // Rows of one table at different heights, where the taller rows are the
+  // ones holding a control taller than the short rows: a button given the
+  // touch-target floor as its own minimum height. An invoices table had its
+  // "Mark as paid" rows at 65px among 41px ones. Rows that differ because a
+  // cell's text wraps are left alone: only a control can be the cause here.
+  const unevenRows = [];
+  for (const table of [...document.querySelectorAll('table')].slice(0, 20)) {
+    if (unevenRows.length >= 3 || getComputedStyle(table).display !== 'table' || !vis(table)) continue;
+    const rows = [...table.querySelectorAll('tbody tr')].filter((r) => vis(r));
+    if (rows.length < 2) continue;
+    const heights = rows.map((r) => Math.round(r.getBoundingClientRect().height));
+    const short = Math.min(...heights);
+    const control = rows
+      .filter((r, i) => heights[i] > short + 2)
+      .map((r) => [...r.querySelectorAll('button, a[href], input, select')].find((c) => vis(c) && c.getBoundingClientRect().height > short))
+      .find(Boolean);
+    if (!control) continue;
+    unevenRows.push({ table: 'table' + (table.classList[0] ? '.' + table.classList[0] : ''), short, tall: Math.max(...heights), control: control.tagName.toLowerCase() + (control.classList[0] ? '.' + control.classList[0] : ''), controlHeight: Math.round(control.getBoundingClientRect().height) });
+  }
   return JSON.stringify({
     jigProbe: ${PROBE_VERSION},
     url: location.href,
@@ -6642,6 +6661,7 @@ var PROBE_SCRIPT = `(async () => {
     sidewaysScroll: doc.scrollWidth > doc.clientWidth,
     sidewaysBoxes,
     brokenCells,
+    unevenRows,
     bodyFont: getComputedStyle(document.body).fontFamily,
     defaultFont: getComputedStyle(document.body).fontFamily === defaultFont,
     unresolvedTokens: [...unresolved],
@@ -7128,6 +7148,9 @@ function probeCheck(probes, verdictOf, indexable = true, mode) {
       const shown = p.brokenCells.map((c) => `${c.cell}${c.text ? ` ("${c.text}")` : ""} is display: ${c.display}`).join("; ");
       failures.push(`${at(p)}: ${p.brokenCells.length === 1 ? "a table cell has" : `${p.brokenCells.length} table cells have`} left the table: ${shown}. A cell given its own display stops taking its row's height, so its border and its text drift from the row's. Keep the cell a cell and put the flex on a wrapper inside it (P-06).`);
     }
+    for (const u of p.unevenRows ?? []) {
+      failures.push(`${at(p)}: ${u.table}'s rows are not one height: those holding ${u.control} (${u.controlHeight}px tall) stand ${u.tall}px, the rest ${u.short}px. A button in a row takes the row's height and has no minimum height of its own; on a touch screen the row rises to the touch target instead (P-02, P-06).`);
+    }
     if (p.defaultFont) {
       failures.push(`${at(p)}: the page renders in the browser's default font (${p.bodyFont ?? "unknown"}) \u2014 its styles are not applying. No review of this page can pass until they do.`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.26.1",
+  "version": "0.26.2",
   "description": "A design system for coding agents. 160 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
   "license": "Apache-2.0",
   "type": "module",

package/rules/03-patterns.md

@@ -53,7 +53,16 @@ Four numbers, and most button designs in the wild fail at least one:
 | Button **shape** — fill or border — against its background | **3:1** |
 | Button **text** against the button | **4.5:1** |
 | Two buttons sharing a style, distinguished only by contrast | **3:1 between them** |
-| Hit area | `--size-touch-target` — **48×48px** floor |
+| Hit area | `--size-touch-target` — **48×48px** floor, except inside a table row (below) |
+
+**Inside a table row, a button takes the row's height.** A dense row is shorter
+than the floor, and a button given `min-height: var(--size-touch-target)` there
+stretches the rows that hold it and not the rest: an invoices table had its
+"Mark as paid" rows at 65px among 41px ones, twice. Size it to `--size-control`
+and never give it a minimum height of its own. On a touch screen the row itself
+rises to `--size-touch-target` (the mode files do it under a coarse pointer), so
+a finger still gets the floor. The render probe reports rows made uneven this
+way.
 
 A secondary button's fill or border is **not decorative**. It is the only thing identifying the element as a button, so it carries the 3:1 non-text requirement (`02-tokens.md`). Strip it and you have coloured text.
 
@@ -285,6 +294,7 @@ Primarily an `operator` pattern; the rules apply wherever a table appears.
 **Rules**
 - Row identity is stable across refresh, sort and filter. A row that moves under a click causes the wrong record to be acted on — the most damaging bug this pattern has.
 - Numeric columns are right-aligned and use tabular figures (`--font-numeric`). Text columns are start-aligned. Never centre either.
+- Every row is one height. A button or link in a row takes the row's height and has no minimum height of its own (see the Button pattern, Hit area).
 - A cell stays a table cell. To line up what is inside it (a name and a tag, an icon and a label), put `display: flex` on a wrapper inside the cell, never on the `<td>` or `<th>` itself: a cell given its own display stops taking its row's height, so its text and its border drift from the rest of the row. A table stacked on a phone, the whole table set to `block`, is the exception (`L-01`, step 6). The render probe reports a cell that has left its table.
 - Column headers state units. "Weight" is ambiguous; "Weight (kg)" is not.
 - Truncation is resolvable by click or expand, never by hover alone (`E-31`, `01-modes.md`).