feat(ui): readable order card — status as background tint, corner ✕ #58

Merged
developer merged 2 commits from feature/issue-46-order-card-readability into development 2026-05-26 06:39:09 +00:00

2 Commits

Author SHA1 Message Date
Ilia Denisov 2294d8b3d9 fix(ui): tighter order card — calculator-scale font, corner-flush ✕;
Tests · UI / test (push) Has been cancelled
Tests · UI / test (pull_request) Successful in 2m47s
stabilise report-sections e2e

Owner review on PR #58:

- shrink the order-card body to 0.8rem (matching the calculator's body
  text scale) so the order list reads as part of the sidebar's
  density, not its own larger surface;
- shrink the delete ✕ to 0.95rem and glue it flush to the card's
  top-right corner (no offset, sized to fit the corner padding-space);
- tighten the card padding to match the smaller text.

Independently — the same review asked to fix `report-sections › every
TOC anchor lands its section in view`, which had been a long-standing
e2e flake (run #366 on `development` already failed it twice before
passing on retry; my PR's run #367 simply exhausted all five retries).
The root cause is the smooth `scrollIntoView` settling slower than
Playwright's 5 s viewport wait under heavy CI load. The production
TOC already honours `prefers-reduced-motion: reduce` and swaps to an
instant scroll there; switching the Playwright config to that media
mode makes every spec deterministic without touching production code.
2026-05-26 08:28:58 +02:00
Ilia Denisov 5ca30df334 feat(ui): readable order card — status as background tint, corner ✕
Tests · UI / test (push) Waiting to run
Tests · UI / test (pull_request) Successful in 2m48s
The order-tab row now wraps long labels (`overflow-wrap: anywhere`),
encodes status into the card background via the design-token subtle
palette (applied → success-subtle, invalid/rejected/conflict →
danger-subtle, draft/valid/submitting → warning-subtle), and exposes
a small framed `✕` delete button absolutely positioned in the
card's top-right corner — always visible, labelled by
`game.sidebar.order.command_delete` for assistive tech. The textual
status name remains in the DOM as an `.sr-only` node so screen
readers and the existing testids still observe it.

Refs #46
2026-05-26 07:23:44 +02:00