[daniel-tsx]

Stacked PR 4 of 4 (#9 → #10 → #11 → #12), on top of #11 (feat/web-ui-detail). After #11 is squash-merged, rebase onto main (git rebase --onto origin/main e6bb2da) so the diff shows only this slice.

What and why

Slice 4: motion, responsive and accessibility polish, closing the revamp. No API, schema or business-logic change.

• Motion, only where it explains a change: route content settles in once (not on filter changes), skeletons pulse while loading, the open workflow step pulses, and the palette fades in. prefers-reduced-motion removes all animation and transitions.
• Responsive:
  • On phones the current nav link scrolls into view, with edge shadows showing more links.
  • Wide tables pin their first column on phones.
  • Content stops widening at 1680px.
  • No horizontal page scrolling at 320px.
• Accessibility:
  • Form control edges went from 1.6:1 to 3.6:1 (--rule-control, WCAG 1.4.11).
  • Copy buttons grew from 20px to 24px, and standalone links got a 24px minimum (WCAG 2.5.8).
  • In forced-colors mode, the current page, active chip and palette selection get outlines.

Screenshots: .tmp/web-ui-revamp/screens/slice4 (local, not attached). Compare with screens/before for the whole revamp.

Review guide

• Read carefully:
  • The main > * enter animation in apps/web/app/globals.css. It must not replay on filter changes, and that relies on React keeping page elements mounted.
  • The sticky first column on phones, which applies to every table except the journal table.
• Skim: the forced-colors and target-size rules; components/nav-link.tsx (one scrollIntoView effect).
• Least confident about: the open-step pulse is the only animation that never stops. Easy to make it run once.
• Tests removed, weakened or skipped: none.

Task size

T1 (apps/web only).

Checks

Result	Command	Scope / notes
PASS	pnpm --filter @fintech-lab/web lint / build / typecheck / test	web; test 12/12
PASS	pnpm lint	repo-wide
PASS	pnpm test	repo-wide: API 50 passed, 971 database tests skipped (opt-in by design); web 12/12
PASS	pnpm build	repo-wide
PASS	pnpm typecheck	repo-wide
PASS	git diff --check	whitespace
PASS	Rendered-page audit (temporary script, deleted)	text contrast against real backgrounds, target size and page overflow on 13 page states at 1440, 390 and 320px: zero findings after fixes; the script caught deliberately planted low-contrast text
PASS	Browser	reduced motion → animation: none with content visible; keyboard order chips → sort headers → row links, each with a visible focus ring
NOT RUN	pnpm test:integration:docker	not required: no API, database or queue change
NOT RUN	Hosted CI	pending on this PR

Unverified boundaries

Forced-colors mode was not emulated; its rules were reviewed, not rendered. No screen reader was run; ARIA was checked through the DOM and accessibility tree.

Review

T1 self-review (ponytail-review). Finding and disposition: the mobile nav's negative margins made scrollIntoView line the current link up with an off-screen edge → removed the bleed, and confirmed the current link is visible on /, /settlements and /audit.

Docs and temporary files

docs/ui-signature.md: new "Motion", "Responsive behaviour" and "Accessibility" sections. Kept until the stack is merged or rejected: .tmp/web-ui-revamp/screens/ and local server logs. The disposable PostgreSQL container fl-web-ui-revamp-pg is still running locally.

🤖 Generated with Claude Code