[threeqube]

Closes #44

What changed

Each Details row's value starts with a small mark (✓, ⓘ, ✕). It was laid out as part of the text, which caused two problems:

• A word too long to fit beside the mark, such as an issuer's did:key, left the mark alone on the line above.
• A wrapped value's second line started back under the mark.

The mark is now a bullet. It stays on the value's first line, and every line of the value starts just after it.

before                                      after
ⓘ Springfield College — not on our list of   ⓘ Springfield College — not on our list of
known issuers                                  known issuers

CSS only (src/verifier-credential.ts); no markup, wording or verdict logic changes.

One decision to flag: in a wide card, where label and value sit side by side, a value that wraps now has its lines start-aligned (left-aligned in English) just after the mark, rather than right-aligned. One-line values still sit at the row's end as before. Across the 12 demos at 1024px, only the "Registry offline" Issuer value wraps.

Also from review:

• Words that can't wrap no longer push the mark over the label. This affects Safari before 15.4 (no overflow-wrap: anywhere) and host pages that set white-space: nowrap.
• A host page that centres its text no longer centres the labels away from their values.

Testing

• New tests: 5 layout tests fail on main and pass here:
  • a did:key at 360px and 1024px;
  • wrapped lines in stacked rows (left-to-right and right-to-left) and in side-by-side rows.
• Review fixes: each has a test that fails when the fix is removed. The fixes cover the mark staying round, words that can't wrap, a centred host page, and side-by-side right-to-left.
• Screen readers: a new test checks each row is read as label, status word, value, with the mark hidden. Chrome's own accessibility tree gives identical text to main for all 12 demos at 360px and 1024px.
• Layout against main:
  • At 1024px, every one-line value across the 12 demos sits where it did on main, to within 0.5px.
  • Row heights are unchanged at 360px and 1024px, measured on "Issuer unknown".
  • In right-to-left the mark now mirrors exactly; before, it sat 2px off.
• Wallet: built and packed release-style, then installed into a copy of the wallet. Its own Verifier slot was checked at 320, 360 and 600px:
  • main shows both bugs and this branch fixes both;
  • the wallet's tests/verifier-plugin.spec.ts passes with both packages;
  • its production build passes.
• Other engines: layout tests also pass in WebKit and Firefox (run locally).
• Local runs: typecheck, lint and unit tests pass. The full browser suite couldn't run cleanly locally because port 5180 was in use; the 8 status-list tests that need it fail the same way on main. CI runs the full suite.
• Reviews: two fresh-context reviews (CSS and accessibility; tests), then a diff-only re-review of the fixes. No open Important findings. A security review found nothing.

Risk

Low. The change is cosmetic and limited to the Details rows. The worst case is a mark or line slightly out of place in some browser; the text, the verdict and what screen readers hear don't change. The wallet picks this up only when its verifier-plugin pin is bumped.

How to revert

Revert the single commit. Nothing else depends on it.

Deferred

A host page that sets white-space: nowrap still makes long Details values run past the card. That happens on main too; it's worth a follow-up issue.

🤖 Generated with Claude Code

[github-actions]

Try it: https://digitalcredentials.github.io/verifier-plugin/pr-45/

Updates on every push to this PR, and goes away when it closes. The browser tests run against this copy too.

[threeqube]

Closing without merging: on reflection this cosmetic change isn't worth carrying. #44 is closed as not planned.