[Woo POS payments onboarding] POS modal close button could be vertically positioned differently based on the modal content

[jaclync]

Describe the bug

In the payments onboarding UI, the content could change based on the onboarding state. When going through different states, the POS modal close button vertical position could change based on the modal content.

To Reproduce
Steps to reproduce the behavior:

• Switch to a store eligible for POS, and payments plugin has overdue requirements or not set up
• Go to Menu > Point of Sale Mode
• Tap on Connect your reader --> notice that the X button for the "loading" and "plugin not set up/overdue requirements" (and maybe other error states) can be vertically positioned differently

Screenshots

Simulator.Screen.Recording.-.iPad.Pro.11-inch.M4.-.2024-11-14.at.15.52.34.mp4

Expected behavior

The X button vertical position should remain consistent based on the design regardless of the content below.

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

Mobile Environment
Please include:

• Device: iPad
• iOS version: 17.5.1 / 18.0
• WooCommerce iOS version: 20.9

[dangermattic]

🚫 Please add a type label (e.g. type: enhancement) and a feature label (e.g. feature: stats) to this issue.