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

[Sidsector9]

@qasumitbagthariya as discussed on Slack, the minimum supported screen size is 1200 x 900px.