Fixing bug with CES modal styles after breaking change in GB radio component.

[joelclimbsthings]

All Submissions:

• Have you followed the WooCommerce Contributing guideline?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This is to resolve a styling issue on the CES modal that cropped up in stores running WP 6.1:

It looks like this was due to a breaking change in the GB RadioControl component within this PR. In effect users that are running on top of WP 6.0 had no issue, while those with 6.1 saw the above vertical layout within the CES modal.

I've added styles to address the change, and currently I've left the previous styles intact to ensure we don't have the same issue crop on on 6.0 and earlier installations. Ideally these should eventually be removed.

We could also potentially target both successfully with the :has selector, , but that is not supported in Firefox currently.

Closes #35570 .

How to test the changes in this Pull Request:

1. Checkout branch on new store running WP 6.1
2. Ensure you enable event tracking when asked.
3. Create your first product, and then click "Give feedback" on the popup after publishing.
4. Observe that the modal layout is correct:

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

FOR PR REVIEWER ONLY:

• I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

[github-actions]

Test Results Summary

Commit SHA: fca08ec

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	260	0	0	2	0	262	0m 55s
E2E Tests	186	0	0	6	0	192	15m 43s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[joshuatf]

Thanks for fixing this up, Joel! This is testing well for me and fixes the issue on larger screens.

I left a comment about smaller screens, but not entirely sure what that was supposed to look like before so pre-approving, but happy to review again if we need to update that. cc @jarekmorawski

[joshuatf]

On smaller screens, this still looks a little odd, but I'm not really sure what it was supposed to look like before:

[joelclimbsthings]

Funny, I thought the same and tried centering everything, but it still looked odd. I'll look more into this, but feedback from @jarekmorawski would be helpful.

[jarekmorawski]

Can we break it into two columns and center them? 🤔

[mattsherman]

I agree that on smaller screens it looks odd, but it is readable and useable. Since this is a code freeze exception, I suggest we merge this fix as is and tackle further improvements for small viewports in the future.

[joelclimbsthings]

We actually ended up favoring @louwie17 's fix which had the icons centered, so this one will be closed. As Matt suggested any further improvements can be captured in another issue.