Build a responsive card/table dual layout for Transaction History

[greatest0fallt1me]

Description

This is a UI/UX issue. src/pages/TransactionHistory.tsx (~517 lines) presents transaction data that needs to remain scannable on desktop yet usable on phones. Provide a dense, aligned table on wide screens that gracefully transforms into stacked, label-paired cards on mobile, without horizontal scrolling.

Requirements and Context

• On desktop, render a semantic table with right-aligned monetary columns and consistent number formatting (fmt/fmtDateTime from src/utils/tokens.ts).
• Below the breakpoint, transform rows into cards where each value is paired with its column label.
• Color-coded transaction types (Draw/Repay/Fee/Interest) must include a text/icon cue, not color alone.
• Preserve table semantics (<caption>, scope on headers) for screen readers in the table view.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/transactions-responsive-table

2. Implement changes
   • src/pages/TransactionHistory.tsx
   • src/pages/TransactionHistory.css
3. Test and commit
   • npm run dev at 360/768/1280px
   • npm run test
   • Include responsive screenshots in the PR

Example commit message

feat: add responsive table/card layout to Transaction History

Acceptance Criteria

• No horizontal scroll on mobile; cards pair labels with values
• Desktop table has aligned money columns and proper semantics
• Transaction type distinguishable without color
• Consistent number/date formatting throughout

Guidelines

• Responsive layouts; WCAG 2.1 AA: 1.3.1, 1.4.1
• Clear documentation and inline comments
• Timeframe: 96 hours