Skip to content

style(ui): two text tones in data tables; name column sized to its names - #221

Merged
HTExplicit merged 2 commits into
mainfrom
ui/polish
Oct 1, 2026
Merged

style(ui): two text tones in data tables; name column sized to its names#221
HTExplicit merged 2 commits into
mainfrom
ui/polish

Conversation

@HTExplicit

@HTExplicit HTExplicit commented Oct 1, 2026

Copy link
Copy Markdown
Owner

Summary

The owner's two remaining complaints: "名称这里你留这么大的空白干啥" (the accounts name column) and "文字颜色略淡略深导致人眼看起来依旧不舒服" (near-identical greys in table cells, e.g. the usage-records Token / cost columns).

  1. Two text tones in data tables. One ink for values, one grey for secondary values, references and labels. Light: #1f1f23 / #66666e. Dark: #e8e8ec / #a3a3ac; a selected dark row lifts the grey to #b8b8c0. These are existing tokens; the in-between greys are gone.
    • Covers usage records (admin and user), error lists, the ops error dialog, accounts, API keys, users and distribution tables, plus the accounts toolbar, pagination, the records tab strip and the IP region bar.
    • "A $" references are 12px grey. Status, platform, accent and token-icon colours are unchanged.
    • Implemented as role tokens in tokens.css and section 12 of data.css. The selected-row lift reuses the existing row rule, so no new relational selectors.
  2. Name column sized to its names. AccountsView measures the page's names, emails and #IDs with canvas, and softWrap.nameColumnWidth picks the width that minimises blank space plus a per-extra-line cost. The floor is the widest unbreakable piece; the ceiling is two lines per name.
    • The width depends only on the page's names, not on the screen width. The leftover goes to the other columns.
    • Names wrap at word boundaries (<wbr> after / in URLs). Cindy hashes are never split, and there are no . breaks in hosts or emails.

Measured (production vs this branch)

The owner's own case: accounts sorted by created time, descending, sidebar collapsed, 1440.

  • The name column goes from 364 px to 239 px.
  • 44 pages × 1280/1440/1920:
    • Horizontal overflow is 0 everywhere; before, a few pages overflowed at 1280/1440.
    • Names on 3+ lines at 1280: 566 → 7. Split cindy hashes: 403 → 0.
    • Median name blank per row: 1280 29 → 4 px, 1440 20 → 5 px, 1920 115 → 32 px.
  • Text: about 11,400 text segments match the reviewed design exactly. Each covered table now has two neutral tones; before, there were 3–8 greys per page with neighbours only 1–8 ΔE apart. WCAG AA: 0 failures, including dark selected and hovered rows. Theme off is identical to production.

Tests

  • vue-tsc exit 0; eslint on the changed TS/Vue files exit 0.
  • Specs pass: softWrap (13, new), AccountsView (9 files, 69 tests).

🤖 Generated with Claude Code

Codex and others added 2 commits October 1, 2026 17:03
Codex @claude
feat(ui): two text tones in the record tables; the account name colum…
5560ae7 
…n hugs its names

Text tones (owner option A "two tones", reviewed in artifacts/tmp/ui-polish/text):
- tokens.css: the light label grey joins the muted grey (#66666e); data text role tokens: primary
  and labelled values the ink, secondary / reference / label one grey (#1f1f23 / #66666e,
  dark #e8e8ec / #a3a3ac), a dark selected row lifts its grey to #b8b8c0.
- data.css 12: in the cells, headers and toolbars of the usage records, the error lists, the ops
  error dialog, accounts, API keys, users and the distribution tables, the theme's text tokens and
  upstream's grey classes resolve to those roles; labelled values (one + between DataTable's static
  hooks), row actions and line labels; the dark selected-row lift (style query, Firefox @supports
  twin). Distribution figures and page numbers read their roles directly; distribution figures are
  Geist Mono.
- page files: usage token figures in the ink, Mono 13 / 400; A $ a 12px reference; latency Mono 12;
  IP 12px; reasoning effort secondary; endpoint path labelled; error message primary, platform and
  category secondary; accounts e-mail secondary, classification / route values labelled, priority
  figures primary, filter pills drawn as controls; keys and users exceptions; ops dialog time.

Account name column:
- softWrap.ts: a word with figures inside it (cindy-global-<18>-, eucadc5ca109engnmw@) is never
  broken; nameLinePieces / nameWidths model the cell's line breaks (validated against Chromium on
  all 863 names: one line at the one-line width, at most two lines at the two-line width, e-mails
  only before the @, no code split, no dot break).
- AccountsView measures the page's names and e-mails on a canvas (from the page's rows, so a
  virtualised list keeps one width; re-measured when web fonts load) and binds the one-line,
  two-line and widest-piece widths as custom properties (theme only).
- tables.css: the column takes the one-line width where the table has room beside the other columns
  (1920), else the two-line width (1440); it no longer takes a share of the spare width. A floor at
  the widest piece (10rem cap, 7rem below 1400px) lets a squeezed table break an over-long URL or
  code instead of scrolling sideways. Also: the scheduling-weight figures wrap at their "/" below
  1400px, the usage cell's hover tips open leftwards, a note's long token may wrap.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Codex @claude
fix(ui): the account name column follows the page's usual names at ev…
218da66 
…ery width; one selected-row rule

Account name column (owner 2026-10-01, 「账号名称空白太多也没优化」; independent verification of 5560ae7: page 1
had grown wider, one long name still set the column, 1536-1680 and a collapsed sidebar switched to a wider column):
- softWrap.ts: nameColumnWidth gives each page the width at which its names, e-mails and #ids leave the least blank
  beside them, an extra line counting as 40px of blank (NAME_LINE_COST), between the widest piece (codes and host
  names stay whole; a token over pieceCap breaks inside instead) and the widest two-line width. nameRuns / nameLines
  model the cell's lines (on all 863 rows at 1440: 0 line-count differences from Chromium, every page's column = the
  model's width + 1px). A name or e-mail wider than the column takes another line at its word joins (Nightingale |
  Giovanna7598 | @hotmail.com) instead of widening the column for the whole page: an e-mail is no longer held to
  breaking before its @ only. nameWrapParts also breaks after a URL's slashes (a <wbr>; Chromium does not break
  there), never at a host name's dots. nameWidths (one / two / piece widths) is replaced.
- AccountsView binds --account-name-w and --account-name-piece from it (names 500 13px, e-mails 400 12px, the #id in
  Geist Mono 12 while its column shows; pieceCap 16rem).
- tables.css: the column is that width at every screen width; the one-line / two-line step on the table width
  (min(100cqw - 60rem, 30cqw)) is gone. Below 1400px the 7rem floor stays (page 41 with all 21 columns at 1280: the
  other columns are at their floors there, so a higher floor scrolls sideways).

Selected rows (dark): section 1's existing row rule (the subject-position :has() on the page's own select box) also
sets the three data roles of 12.4, which the cells inherit; 12.4's style query and its Firefox @supports :has() twin
are removed (no new relational selector; the same in every browser).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@HTExplicit
HTExplicit merged commit 6b042ca into main Oct 1, 2026
18 checks passed
@HTExplicit
HTExplicit deleted the ui/polish branch October 1, 2026 11:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@HTExplicit