fix: keep client stepper visible on mobile - #532
Conversation
E2E — mocked backend🎭 E2E Tests✅ All green — 350 passed · 0 failed · 1 skipped, across 28 spec files in 7m 7s. By spec file
All 351 tests — click to expand
Slowest 10 — what the shard counts should be tuned against
📼 Download the HTML report, videos and traces — see the Generated by run 34188184081 from |
E2E — real Fineract🎭 E2E Tests✅ All green — 77 passed · 0 failed · 0 skipped, across 23 spec files in 7m 2s. By spec file
All 77 tests — click to expand
Slowest 10 — what the shard counts should be tuned against
📼 Download the HTML report, videos and traces — see the Generated by run 34188184081 from |
What and why
At mobile widths, the client-creation stepper rendered every non-wrapping label in one row, while the surrounding Ionic card clipped the overflow. This keeps all numbered markers in view, gives layout space only to the active label at the shared 768px mobile breakpoint, and exposes each translated label plus the current step to assistive technology. Wider layouts keep the existing presentation.
Closes #489
Verification
npm run check:responsiveWATCHPACK_POLLING=true CHOKIDAR_USEPOLLING=true npm run test:e2e -- e2e/mobile-shell.spec.ts --project=mobile --grep 'keeps every client-creation step reachable'— passed against the mocked backend with the Pixel 7 profilenpm test -- --watch=false— 1,461 tests passed across 239 filesnpm run lintnpm run format:checknpm run check:iconsnpm run i18n:checknpm run buildScreenshots
The before state is captured in #489. The focused mobile browser test verifies the fixed geometry by asserting that the stepper does not overflow and all three markers remain within the viewport.
Checklist
src/app/api/.src/app/core/adapters/instead of direct browser globals or imperative third-party APIs.