feat: build responsive mobile layout for invoice pages

[misrasamuelisiguzor-oss]

Description

Audit and refactor the invoice creation, invoice detail, and invoice payment pages to be fully responsive on mobile devices. All layouts should adapt gracefully to small viewports without horizontal scrolling or broken UI elements.

Requirements and context

• Invoice creation form must be usable on screens 320px and wider
• Invoice detail page should stack columns vertically on mobile
• Payment page buttons and inputs must meet minimum touch target sizes (44x44px)
• Test on common mobile breakpoints: 320px, 375px, 414px
• Follow existing project conventions

Suggested execution

1. Fork the repo and create a branch

   git checkout -b feat/responsive-mobile-invoice-pages
   

2. Implement changes
3. Test and commit

Example commit message

feat: build responsive mobile layout for invoice pages

Guidelines

• Assignment required before starting
• PR description must include: Closes #[issue_id]
• Keep PR description professional and detailed

[jethrojohn739-max]

@jethrojohn739-max has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

i would love to work this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @jethrojohn739-max to this issue.

[shakourllahfashola-dev]

@shakourllahfashola-dev has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this task. Kindly assign me this task.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @shakourllahfashola-dev to this issue.

[TheWeirdDee]

@TheWeirdDee has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi, I build responsive layouts regularly and I'll audit all three pages, stack columns correctly on mobile, hit the 44x44px touch target requirement, and test across the specified breakpoints. A mobile invoice flows have real usability stakes — a form that requires horizontal scrolling or has undersized touch targets on 375px will lose users at the payment step.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @TheWeirdDee to this issue.

[drips-wave]

Congratulations, @jethrojohn739-max! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @jethrojohn739-max: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊