fix/202: make "You're connected to Square" page entire UI to be visible

[Sidsector9]

All Submissions:

• Does your code follow the WooCommerce Sniffs variant of WordPress coding standards?
• Have you written new tests for your changes, as applicable?
• Have you successfully run tests with your changes locally?
• Will this change require new documentation or changes to existing documentation?

---

Changes proposed in this Pull Request:

This PR uses combination of max/min - width/height media queries to ensure the "Next" button is always visible on the screen for desktop resolution as low as 1280 x 720.

Closes #202

Steps to test the changes in this Pull Request:

• Test for minimum desktop resolution of 1280 x 720
• Test for mobile resolution.

Changelog entry

Fix - Vertical spacing on "Enable Payment Methods" step.

[dkotter]

Looks like an eslint issue that needs cleaned up here

[qasumitbagthariya]

QA Update: ❌

@Sidsector9 Thanks for the PR

I cross-checked with the fix/202 branch, and it seems like the designs for the following screens are not displaying properly:

• Select your business location
• Configure sync setting
• Manage payment method

Could you please check from your end as well?

Screen.Recording.2024-09-27.at.3.00.50.PM.mov

[qasumitbagthariya]

QA Update: ❌

@Sidsector9

Issue - 1

Unable to scroll down in 1024x768 resolution.

1024.768.mp4

---

Issue - 2

In this, fix branch I notice Some screen settings are flickering while selecting.

Screen.Recording.2024-10-03.at.5.47.13.PM.mov

[qasumitbagthariya]

QA Update: ⚠️

@Sidsector9

I notice that the Next button at the bottom right corner is partially hidden and not fully visible to the user. This may affect usability, as users might struggle to scroll and proceed to the next step.

My screen resolution is 1512*982

---

I just want to confirm — have we made changes to the Manage Payment Methods UI? Because earlier it looked a bit different, with a smaller-sized button.

Fix PR

Before: