Make the deposit modal transaction preview panel responsive at narrow widths

[greatest0fallt1me]

Description

This is a UI/UX responsive issue. The deposit modal in src/App.tsx uses a two-column .modal-grid (form panel + preview panel). On small screens the columns cramp, the .preview-row key/value pairs and the long transaction hash overflow, and the modal can exceed the viewport height without internal scrolling.

Requirements and Context

• Stack the form and preview panels in a single column below a defined breakpoint.
• Constrain the modal to the viewport with internal scrolling and a pinned action footer.
• Ensure the truncated hash, preset buttons, and .modal-actions remain usable and tappable on mobile.
• 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/deposit-modal-responsive

2. Implement changes
   • src/index.css — add responsive .deposit-modal/.modal-grid rules and max-height + scroll
   • src/App.tsx — adjust markup only if needed for the scroll/footer structure
3. Test and commit
   • npm run dev, open the modal at 360px and 768px through the full deposit flow
   • Include test output and notes in the PR

Example commit message

feat: responsive layout for deposit modal

Acceptance Criteria

• Form and preview stack on mobile without overflow
• Modal fits the viewport with internal scroll and pinned actions
• Hash and preset buttons remain usable on small screens
• Desktop two-column layout is unchanged

Guidelines

• Cover mobile, tablet, and desktop breakpoints
• Clear documentation and inline comments
• Timeframe: 96 hours