[akandeisaac021-design]

Summary

Closes #1320

On a 375px phone, Billing History was a six-column table that scrolled sideways, and the on-chain details lived in a hover-only PreviewCard that touch users couldn't reliably open. Below 640px the page now renders one tappable card per transaction, with a Details bottom sheet showing the same on-chain details as the desktop preview. At 640px and above the table is unchanged.

What changed

• refactor: moved the inline styles in BillingHistory.tsx into BillingHistory.css (.billing-history .bh-*, scoped so desktop specificity is unchanged).
• useMediaQuery hook picks the layout. One DOM source per breakpoint: the table is not rendered on mobile, so screen readers never read both.
• TransactionCard: a list item with a heading, StatusBadge (text label, not colour alone), signed amount, date and a Details button.
• Details sheet: the existing BottomSheet plus a new TransactionDetails (full hash with Copy, network, confirmations, time). Closes on Escape, backdrop tap and the close button; focus returns to the Details button.
• BillingSortSelect (mobile only) shares applySort with the column headers, so the sort/dir URL params behave identically on both layouts.
• Filters stack in one column below 640px; the net-balance summary stays at the top. Touch targets are at least 44x44px.
• Mobile wording says "Tap Details" instead of hover/Esc hints.
• Docs: docs/BillingHistoryPreview.md. A11y manifest entries for the three new components.

Test plan (from the issue)

#	Scenario	Test
1	Mobile: cards, no table	responsive layout › mobile: renders a card list and no table
2	Desktop: table, no cards	responsive layout › desktop: renders the table and no card list
3	Tap Details opens the sheet	details sheet › Details opens a dialog with hash, network and confirmations
4	Escape closes, focus returns	details sheet › Escape closes the sheet and returns focus to the Details button
5	Copy hash	details sheet actions › Copy puts the full hash on the clipboard
6	Mobile sort + URL params	mobile sort behaviour › choosing an option reorders the cards and writes sort/dir to the URL
7	Filter parity	filters on mobile › the same filter shows the same number of transactions as on desktop
8	Card semantics	mobile cards › each card has a heading and a signed amount

Regression proof: row 1 fails before the change: Unable to find an accessible element with the role "list" and name /billing transactions/i.

Verification

<paste your final tsc / build / vitest output here>

Screenshots (light and dark):

Width	Light	Dark
320px
375px
1280px (after)

[Desktop at 1280px was compared against main before and after in both themes and is unchanged. Edit this line to describe what you actually checked.]

Notes for reviewers

• A legacy rule at src/index.css:7874 still makes .billing-history table scroll sideways between 640 and 720px. Out of scope here: the issue asks for cards below 640px only.
• formatTimestamp is now exported from PreviewCard.tsx (a one-word change) so the sheet reuses it. PreviewCard is otherwise untouched, to keep desktop identical.
• The mock data has two transactions with the same description, so the Details button label includes the date to keep them distinguishable.
• Fallback colours in var(--token, #hex) are carried over from the original inline styles.
• A11y manifest status for the new components: [audited / needs-work]. [State what you checked: keyboard, both themes, screen reader or not.]
• The branch is named feat/billing-history-mobile, as the issue's "Getting started" instructs.

[drips-wave]

@akandeisaac021-design 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