fix(ui): the column headers were never above their own data (G0-5)

[haksungjang]

G0-5 is the differentiation plan's last step (docs/ux/differentiation-plan-2026-07-27.md §3.7): a final pass over what the gates cannot see. The three axes the plan wanted to reduce the scope to — visual baselines, axe, translation-key parity — have all become automatic since it was written, so the scope here is the remaining frozen debt plus a sampled human pass over Korean, the phone band, and the empty/error surfaces.

The headline

Both project-detail tables render their header and their rows as two independent flex rows that agree on column widths only by convention, and the convention had broken on both.

	track floor	declared columns	result
Vulnerabilities	1250 px	1596 px	rows overflow 316 px; last column 327 px off
Components	820 px	1120 px	rows overflow 321 px

The header, being an ordinary flex row, absorbed the shortfall by shrinking its cells. The rows would not — their inner button had min-width: auto, so it sized to the untruncated text of every cell (truncate sets white-space: nowrap, which does not reduce min-content). "Discovered" ended up above the SLA dates.

Both are visible in the committed 1440 px visual baselines, and both were approved by eye. That is the point: a screenshot review answers "does this look like the product", not "is CVSS above the CVSS numbers".

Fix: the track is now authoritative — floor raised to the sum of the declared widths, min-w-0 on the row buttons, and one gutter value instead of the header's gap-2 against the rows' gap-3 (4 px of drift per column, 36 px of the total).

Gate: tests/e2e/tableColumnAlignment.spec.ts flattens header cells and row cells into two comparable lists and compares them position by position. It is column-agnostic, so adding a column without moving the floor fails it — which is what happened four times (Title, Discovered, SLA due, and the Components set) with nothing to notice. Verified it fails on each table's old value before landing.

Four Korean screenshots in the user guide were in English

tests/screenshots/capture_ko_locale.spec.ts captures the login, forgot-password, project-create and notification-preferences pages in Korean via setUiLanguage. That helper wrote i18nextLng; lib/i18n.ts configures detection.order: ["localStorage"] against trustedoss.lang and nothing else. So the write landed somewhere nothing reads and all four captures came out in English — and they are the assets the Korean documentation embeds. user-auth-login-ko.png showed a "Sign in to TRUSCA" card with an "English" locale toggle to readers of the Korean guide, and user-projects-create-form-ko.png was byte-identical to its English sibling.

The key is now a single exported constant in src/lib/languageStorage.ts — its own module because lib/i18n.ts calls i18n.init() at import time and imports every locale JSON, so a Playwright helper under Node cannot pull it in. The four assets are Korean in this branch's recapture.

Frozen debt cleared

Narrow-viewport budget 98 → 0, confirmed by the runner (including projects-list, whose numbers had been the ones that disagreed between local and CI). Four causes:

screen	was	cause
project-detail-vulnerabilities	32	the rows above
projects-list	8 / 14	fixed right-hand clusters totalled 386 px and collapsed the project name to exactly 0 px while still overflowing
dashboard	4	recent-scans table needs 474 px of min-content inside a 340 px card
project-detail-overview	2	the 8-tab strip is an inline-flex sized to 767 px with no wrap point

The project row also gave its repository URL 121 px of the 169 px available, leaving the name four characters and an ellipsis — both are lg-gated now, the same breakpoint the shell already uses for created_by and its drawer.

a11y ratchet 8 → 0, both themes. aria-sort sat on a button, where it is invalid ARIA and assistive technology ignores it — so it announced nothing while looking like it did. Four unit tests asserted it, which is how it survived. The accessible name already carries the sort state and what the next click does, in EN and KO. The callers are div tables with no columnheader to move the attribute to; giving them real grid semantics (TableVirtuoso, aria-rowcount, a role per cell) is separate work and is noted in the component.

What else the human pass found

• The vulnerabilities toolbar collapses at 1440 px. Nine controls in a row with no wrap point, so flexbox squeezed the last of them: "Add filter" rendered one character per line, the VEX checkbox label broke into four, the EPSS placeholder was cut mid-number. Korean was worse — "업그레이드별" arrived as "업그". Both toolbars now wrap.
• A project id that does not resolve drew the whole console around nothing: eight clickable tabs each leading to another error, a Scan button, a release picker reading "No version", the governance band reporting a second failure of its own, and the backend's untranslated Project Not Found / project <uuid> not found inside an otherwise Korean page. It is now one localized surface with the reason and the way back.
• The Trivy DB panel's "Next refresh" tile put the same relative time in its label and its value, inside a label that assumed the future: "Next refresh in 5 days ago", with "5 days ago" repeated underneath. This read the same way in English; Korean only made it easier to notice.
• The compliance rows' overflow markers were the last item in a flex row whose badges claimed the width first, so "+10개 더" wrapped into three stacked lines and the first row's height stopped matching its neighbours'.
• The overview's recent-scans card described itself as "Last five scans for this project" directly above "No scans have been recorded yet."
• Korean said "critical" in five places whose severity legend, on the same screen, said "치명"; nine strings spaced a particle after a Latin word ("SBOM 은", "CVE 에"). ko-style and i18n:check are both clean.
• make screenshots-optimize was a no-op. oxipng has no convention that --out - means stdout — it wrote the optimized bytes into a file named - and left stdout empty, so the -s guard correctly kept all 44 originals while the recipe reported no change (and left the screenshots/- artifact). With --stdout the first asset measured goes 128,443 → 38,988 bytes. The recipe is fixed; the assets are not recompressed here.

Checked and not a defect: the scans table's last column looks clipped at 1440 px in both locales, but nothing on that page extends past the right edge — measured, not eyeballed.

The narrow spec now records what each screen spilled on every run, not only on a baseline update — the frozen 98 told nobody what it consisted of, and re-deriving that meant hand-patching the spec.

Verification

• unit 1900 passed / 1 skipped (178 files) — two new guards
• --config=playwright.a11y.config.ts 16/16 (8 screens × light/dark)
• --config=playwright.responsive.config.ts 8/8 at a zeroed budget
• tests/e2e/tableColumnAlignment.spec.ts 2/2, and confirmed failing on the old floors
• npm run lint 0 errors, tsc --noEmit clean, i18n:check in sync, ko-style --all --fail-on S2 0 findings
• baselines and the 44 guide screenshots recaptured on CI (ui-gates.yml run 30515931160), never locally

The Korean particle sweep

864 places in the Korean guides wrote a particle with a space after the word it belongs to — "SBOM 은", "CVE 에", "설정 을". Korean orthography attaches it, and the guides did it both ways with no rule to settle it. latin-particle-space (S1) settles it and the 864 are fixed.

The linter had to change to see them. After the first 440 edits it reported a clean run while 357 instances of its own error remained: inline code spans were masked including their backticks, so the most common form — a particle right after a code span — presented to the rules as a plain space, which no leading character class can match. The mask now blanks the span's content and keeps the delimiters. Still length-preserving, and it cannot make another rule fire (no pattern in the catalogue matches a backtick); it removes a false-positive shape instead, since "에 x 의해" used to mask down to "에 의해" and passive-eui-hae matched across a code span that was never part of the phrase.

The character class is deliberately narrow. A period or comma cannot be in it — "…합니다. 이 페이지는" and "…남고, 이 표기는" are the determiner 이, 66 of them, all correct — and neither can | or -, for the same reason at the start of a table cell or list item. The trailing lookahead is what keeps the rest honest: without it "로그인", "라이선스", "의존성", "이하" and "가져오기" all read as a particle plus a space.

How it was verified, since a mechanical sweep over 32 documentation files is only as good as its guardrails:

• the fixer copies the linter's masking functions verbatim and applies edits at indices found in the masked line, which is sound only because the masking is length-preserving — a naive sed would have edited inside code blocks
• all 481 changed lines are byte-identical to their originals with spaces stripped: every edit removes one space and nothing else
• no line inside a fence, front matter or HTML comment moved, checked with the same state machine the linter uses
• selftest.mjs gains three positive guards, because the failure being repaired here was a gate reporting zero while the error stood. Re-blanking the delimiters now fails the self-test — verified by doing exactly that and watching it fail. (The inline-code masking guard's own fixture was "에 의해 는", which is the error.)
• nine headings changed width, which moved their anchors. The three inbound links to the one that was referenced are updated and the Docusaurus build reports no broken anchors for EN or KO. grep "oncall-runbook#" came back empty because the real form is oncall-runbook.md# — the build was the oracle, not the grep.

Left conservative on purpose: 만 / 도 / 나 / 라 are out of the particle set because they collide with words and numerals (만 = 10,000), and forms where a syllable continues after the particle ("UTF-8 이며") are outside the lookahead.