📋 What was this drill?

Drill: Dense table: build a 12-column data table (monetary values, IDs, timestamps) at 13px text, 10px cell padding, no gridlines, right-aligned numbers. Target: Tufte data-ink ratio.

Interpretation: Building a CI/CD deployments log — Vercel-like domain. Columns: status indicator, branch, commit message, author avatar, hash, environment, deploy time, duration, commit count, production flag. Exercising the 2026-07-05 dense-table lessons in a new domain. Testing status semantics, relative timestamps, branch identity (only main gets accent tint), and human attribution via indigo-ladder avatars.

Acme/Platform/Deployments

Deployments

247 deploys · last 7 days · auto-refresh 30s
ID Commit Branch Author Status Env Dur Deployed
dpl_8K3nqX
a3f9c21 feat: add SAML SSO to org settings
main
MC Maya Chen
Ready Production 2m 14s 3m ago
dpl_7Hc2mR
e1b4d8f fix: retry webhook on 503 from upstream
main
MC Maya Chen
Ready Production 0m 58s 12m ago
dpl_9P1bxK
7c2e6a9 feat: export audit log as CSV with redaction
fix/webhook-retry
DP Devon Park
Building Preview 1m 03s 18m ago
dpl_6Jd8vT
2d8f1c4 chore: bump next to 14.2.5
deps/next-14
RT Ryoko Tanaka
Ready Preview 3m 41s 24m ago
dpl_5Lw4qH
9a7e3b2 refactor: extract charge calculator into service
fix/charge-calc
DP Devon Park
Error Preview 0m 12s 31m ago
dpl_4Kp9zE
f4c8a17 feat: usage-based billing toggle for enterprise
feat/usage-billing
SV Sara Vyas
Ready Production 2m 51s 47m ago
dpl_3Hx7wQ
b6d2e85 docs: update self-host guide for v2.4
main
AL Aksel Lind
Ready Production 1m 22s 1h ago
dpl_2Gc5vN
8e1f3a6 fix: null check on invoice.tax before formatter
fix/invoice-null
RT Ryoko Tanaka
Ready Production 1m 08s 2h ago
dpl_1Fb3uM
5a9c4e1 feat: dark mode for reports (WIP)
feat/reports-dark
SV Sara Vyas
Canceled Preview 0m 04s 3h ago
dpl_9Ea2tL
c4b7d92 perf: cache pricing matrix in redis (5min TTL)
perf/pricing-cache
AL Aksel Lind
Ready Production 4m 17s 4h ago
dpl_8Dz1sK
3f6a8c1 fix: resolve race condition in clock skew detector
fix/clock-skew
MC Maya Chen
Ready Production 2m 03s 5h ago
dpl_7Cy9rJ
d8e2f4a feat: SCIM user deprovisioning via Okta
feat/scim-deprov
DP Devon Park
Queued Preview 5h ago
dpl_6Bx7pH
7a3c9e2 chore: rotate signing keys (quarterly)
main
RT Ryoko Tanaka
Ready Production 1m 47s 7h ago
dpl_5Aw5gG
e9b4d6c feat: webhook event explorer with replay
feat/webhook-explorer
SV Sara Vyas
Error Preview 0m 09s 9h ago
dpl_4Zv3fF
1c7a3e8 fix: handle 429 from upstream with exponential backoff
fix/upstream-429
AL Aksel Lind
Ready Production 1m 34s 11h ago
Showing 15 of 247 Success rate 94.2% · 7d Avg duration 1m 42s
07 / 07CRAFT

Dense table, second pass — what the discipline costs and buys

A deployments log demands the same data-ink discipline as a financial ledger, but with a different vocabulary: status semantics, relative time, branch identity, and human attribution. Six craft decisions did the work.

01

Mono numerics, right-aligned, with sign template

Durations and timestamps share a single right edge. font-feature-settings:"tnum" 1,"zero" 1 locks digit width; white-space:pre preserves the formatter's exact width so the rightmost digit never jitters when 0m 04s sits next to 4m 17s.

.num { font-family: "JetBrains Mono";
  text-align: right; white-space: pre;
  font-feature-settings: "tnum" 1,"zero" 1; }
02

Status as dot + text, not pill

A 7px dot + 12px label is the lightest possible status affordance. Filled pills would over-weight the column and read as designed rather than informational. Active states (Building, Queued) use a pulse animation — colorblind users get motion as a redundant channel.

.status .dot { width:7px; height:7px;
  border-radius:50%; }
.is-warn .dot { animation: pulse 1.4s; }
03

Hover wash, never row borders

Table rows need only a 2.2% black wash on hover — visible enough to anchor the eye, invisible enough not to compete with the data. Borders between rows sit at rgba(0,0,0,0.06): they exist to separate, not to decorate.

tbody tr:hover { background: rgba(0,0,0,0.022); }
td { border-bottom: 1px solid rgba(0,0,0,0.06); }
04

Selected row = tint + 2px left rail + accent ID

Background tint alone reads as hovered. The box-shadow: inset 2px 0 0 var(--accent) on the first cell turns the wash into an unambiguous selected state — the 5th session confirming the pattern. Pairing the ID with accent ink is the third signal: row, column, and identity all agree.

.is-selected { background: rgba(37,99,235,0.05); }
.is-selected td:first-child {
  box-shadow: inset 2px 0 0 var(--accent); }
05

Branch as a tag, main as the only accent

Every branch is a 4px-radius mono pill. Only main gets the accent tint — because main → Production is the load-bearing deploy path users scan for. Non-main branches stay neutral so the eye doesn't have to fight twelve competing colored tags for the one that matters.

.tag { background: var(--ink-100); }
.is-main .tag {
  background: rgba(37,99,235,0.08);
  color: var(--accent-ink); }
06

Mobile: horizontal scroll, not stack

A dense table is a data-density surface, not a card list. Stacking 15 rows into cards would destroy the scan rhythm — the entire point of the table. Instead the table keeps its 880px minimum width and scrolls horizontally under 880px viewport, with a right-edge mask signaling swipe for more. Touch-target sizing is acceptable for a data-inspection surface (cf. 2026-07-08, 2026-07-12).

@media (max-width:880px) {
  .table-scroll { overflow-x: auto; }
  table.deploy { min-width: 880px; } }