Add responsive mobile layout for StreamsTable.tsx eliminating horizontal scroll on narrow viewports

[Jagadeeshftw]

📌 Description

src/components/treasuryOverviewPage/StreamsTable.tsx renders a full data table that overflows horizontally on viewports narrower than ~768 px. On mobile, switch to a card-per-row layout (similar to RecipientStreams) where each stream's key fields stack vertically. Use the breakpoints.ts values from src/lib/breakpoints.ts and a CSS media query in StreamRow.css.

💡 Why it matters: Treasury managers on mobile cannot scan their streams without awkward horizontal scrolling, which is also a WCAG 1.4.10 (Reflow) violation.

🧩 Requirements and context

• Add a CSS media query in src/components/treasuryOverviewPage/StreamRow.css that switches <tr> children to a stacked display: block layout at the mobile breakpoint from src/lib/breakpoints.ts.
• Hide the <thead> on mobile and add data-label attributes to <td> elements used as pseudo-headers.
• Ensure the StreamRow action column remains accessible as a tap target (≥44 px).
• Verify the layout renders correctly in both light and dark themes.
• Add a @media (max-width: ...) snapshot or accessibility note in StreamsTable test.

Non-functional requirements

• 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 feat/streams-table-mobile-layout

2. Implement changes

• Write/modify the relevant source: src/components/treasuryOverviewPage/StreamRow.css, src/components/treasuryOverviewPage/StreamRow.tsx, src/components/treasuryOverviewPage/StreamsTable.tsx
• Write comprehensive tests: src/components/treasuryOverviewPage/__tests__/StreamsTable.test.tsx
• Add documentation: comment in StreamRow.css referencing the breakpoint token source
• Validate security assumptions: data-label values must be static strings, not user data

3. Test and commit

• Run tests:

npm run test

• Cover edge cases: very narrow viewport (320 px), table with 0 rows, table with many rows
• Include test output and security notes in the PR description.

Example commit message

feat(ui): add responsive mobile card layout to StreamsTable eliminating horizontal scroll

✅ Acceptance criteria

• No horizontal scrollbar on viewport widths ≤ 375 px
• data-label attributes provide context for each stacked cell
• Action column tap targets meet 44 px minimum
• Light and dark themes render correctly on mobile
• Existing StreamsTable unit tests pass without modification

🔒 Security notes

data-label attribute values are static strings from the component, not user content, so no XSS risk.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[1nonlypiece]

Hi Maintainers 👋,

I’d like to apply for this issue.

I have hands-on experience with Next.js frontend development as well as Stellar smart contracts using Rust (Soroban). I’m comfortable working with Figma designs, integrating APIs/wallets on the frontend, and implementing, testing, and optimizing smart contracts on Stellar.

I can follow the project guidelines, communicate progress clearly, and deliver clean, well-tested code within the expected timeline.

Looking forward to contributing to the project 🚀
Thanks!