[SDK-1171] Fix payroll review actions at narrow widths

[hukid]

Summary

Fixes the Payroll Overview at narrow reflow widths by keeping the unprocessed payroll Edit and Submit actions in one shrink-safe, equal-width row. The change preserves heading-first semantic order, desktop behavior, submission state and callbacks, while leaving processed payroll receipt/cancel actions stacked for their longer labels.

Changes

• Use two minmax(0, 1fr) tracks for unprocessed base/mobile actions while retaining a single track for processed payroll actions.
• Add regression coverage for action layout, semantic order, enabled callbacks, blocker disabled state, and processed-mobile stacking.
• Add an exact 320x256 Storybook regression story using the existing wire-funds fixture.

Demo

Chromium verification at an exact 320x256 inspection region showed no horizontal overflow. Edit and Submit render on the same row at 156x40 each, both remain operable, the heading precedes the actions, and all later content is vertically reachable. The blocked state and the 639px / 640px breakpoint transition were also verified.

Safari with VoiceOver was not available in the execution environment. That browser and assistive-technology combination remains a manual verification item before merge.

Related

• Jira ticket: SDK-1171
• Tech spec: N/A - this is a localized, reversible presentation fix with no public API or backend contract change.

Testing

• npm run test -- --run --exclude '.claude/**' src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.test.tsx - 32/32 passing after synchronization with origin/main.
• npm run tsc, npm run build, npm run build-storybook, scoped ESLint/Prettier, and diff checks passed during implementation verification.
• Full workspace suite excluding preserved .claude/worktrees: 3,736 passing, 1 expected failure, and 5 unrelated date/time-boundary failures in untouched files.
• Chromium at exact 320x256: no horizontal overflow; Edit and Submit each measured 156x40, shared one row, remained operable, and followed the heading in semantic order.
• Chromium at 639px and 640px: no duplicate or missing action group across the base/desktop breakpoint. The blocked Submit state remained visible and disabled, and processed mobile actions remained stacked.
• Backend E2E was not run because this deterministic presentation regression is covered through Storybook and unit tests; the repository E2E path requires external gws-flows and ZenPayroll services and does not provide the physical reflow assertion.
• Manual follow-up: verify 320x256 reflow, focus order, accessible names, disabled state, and vertical reachability in Safari with VoiceOver.

---

🤖 AI Disclosure: This PR was authored by Codex AI Agent, orchestrated by @hukid. All code, tests, and this PR description were AI-generated under human supervision. Please review with this context in mind.