Problem
On smaller screens (mobile and some tablets), columns in the transactions table of the Wallet Analyzer UI overlap, making data unreadable and impacting user experience.
Steps to Reproduce
- Open the Wallet Analyzer page on a mobile device or resize your browser to a small width.
- Scroll to the transactions section/table.
- Observe columns (such as Transaction ID, Date, Amount, etc.) becoming compressed and overlapping each other.
Proposed Solution
- Refactor the transaction table's layout to be fully responsive.
- Consider switching to a card-style layout on mobile where each transaction's details are stacked vertically, or make columns stack/wrap.
- Use CSS media queries to adapt the table for breakpoints at typical mobile and tablet widths.
- Test with various devices and major browsers to ensure readability and no overlap.
Acceptance Criteria
- Transaction details are clearly readable without overlap on all major mobile device resolutions.
- The fix does not cause layout issues on desktop or tablet screens.
- Solution follows existing UI/UX conventions of BitSleuth Analyzer.
Additional Context
- Technology: TypeScript (React), CSS/SCSS
- This is a high-visibility bug as many users review wallets on mobile.
Assignee: @jamespepper81
Problem
On smaller screens (mobile and some tablets), columns in the transactions table of the Wallet Analyzer UI overlap, making data unreadable and impacting user experience.
Steps to Reproduce
Proposed Solution
Acceptance Criteria
Additional Context
Assignee: @jamespepper81