[UI] : Implement Mobile Responsiveness for Payment Processor

Description

Payments processor 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 Processors Home page (Route: /dashboard/connectors)
2. New payment processor creation (Route: /dashboard/connectors/new?name=${connector_name})
3. Update a connected connector (Route: /dashboard/connectors/${connected_connector_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. New payment processor creation

3. Update a connected connector

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.
• For this issue, submit a PR on https://github.com/juspay/hyperswitch-control-center, and link to the issue.

Refer here for Terms and conditions for the contest.