Skip to content

feat(ui): mobile-first trade view rework for 375px (A22)#183

Open
cybermax4200 wants to merge 1 commit into
Dgetsylver:mainfrom
cybermax4200:feat/a22-mobile-trade-view
Open

feat(ui): mobile-first trade view rework for 375px (A22)#183
cybermax4200 wants to merge 1 commit into
Dgetsylver:mainfrom
cybermax4200:feat/a22-mobile-trade-view

Conversation

@cybermax4200
Copy link
Copy Markdown
Contributor

Summary

Redesigns the primary trade view to be fully usable one-handed on an iPhone SE (375px viewport).

Changes

  • Zero horizontal overflow — min-width fixed, on root elements, overview table scrolls within its container
  • Sticky bottom action bar — Open / Adjust / Add Funds / Close / Repay buttons pinned to the bottom of the screen, always in thumb reach; state mirrored from in-card buttons via MutationObserver
  • Tap targets ≥ 44×44px — asset tabs, adjust sub-tabs, mobile card tabs, pool tabs, slider thumb (28px + 8px glow halo)
  • Slider zone labels — abbreviated (Safe / Mod / Agg / Degen) via CSS ::after to prevent overflow at 375px
  • Slider row — stacks range input full-width with number input below on small screens
  • Position actions — stacked full-width on mobile

Tested

  • Build passes (vite build, no TS errors)
  • All acceptance criteria met: no horizontal scrollbars at 375px, primary CTAs in thumb zone, tap targets ≥ 44px

Closes #24

- Fix horizontal overflow: two-col min-width, overflow-x hidden
- Add sticky bottom action bar for thumb-reach CTAs (open/adjust/close/repay)
- Enlarge tap targets: asset tabs, adjust tabs, slider thumb all ≥44px
- Abbreviate slider zone labels to prevent overflow at 375px
- Stack slider row and position actions vertically on small screens
- syncMobileActionBar() mirrors in-card button state via MutationObserver

Closes Dgetsylver#24
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 29, 2026

@cybermax4200 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

A22: Mobile-first rework of trade view

1 participant