Skip to content

Fix Overlapping Transaction Columns in Mobile View #30

@jamespepper81

Description

@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

  1. Open the Wallet Analyzer page on a mobile device or resize your browser to a small width.
  2. Scroll to the transactions section/table.
  3. 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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No fields configured for Task.

Projects

Status
Backlog

Relationships

None yet

Development

No branches or pull requests

Issue actions