[UI] : Implement Mobile Responsiveness for Payment operations

[Riddhiagrawal001]

Description

Payments operations page need to be optimised for mobile devices to ensure a seamless user experience across various screen sizes and resolutions.

Pages to Update:

1. Payment Operations Home page (Route: /dashboard/payments)
2. Details of a payment(Route:/dashboard/payments/${payment_id}/${profile_id})

Requirements

1. Ensure all elements (text, images, buttons, etc.) scale appropriately for mobile viewports.
2. Changes for mobile responsiveness doesn't hamper the existing web view
3. Test across multiple devices and browsers (iOS, Android, Chrome, Safari, etc.).

Current pages in mobile view

1. Payment Processors Home page
2. Details of a payment

Acceptance Criteria

1. Each page must be fully functional and visually optimised for mobile devices.
2. Navigation elements (menus, buttons) should be easily clickable and accessible on touchscreens.
3. The design should maintain visual consistency with the desktop version while being mobile-friendly.
4. Proper testing and verification on different devices and screen sizes.
5. Changes for mobile responsiveness doesn't hamper the existing web view

Submission Process:

• Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
• Once assigned, submit a pull request (PR).
• Maintainers will review and provide feedback, if any.
• Maintainers can unassign issues due to inactivity, read more here.

Refer here for Terms and conditions for the contest.