Issues with Key metrics section in Admin settings page responsiveness on 601px to 653px viewports

[mohitwp]

Bug Description

"Edit your answers for more personalized metrics: " breaking into 2 lines when viewports width is between 601px to 653px.

Expected: Text should be on one line—the same as it does when viewport is 600px wide.

Steps to reproduce

1. Set up site kit with Analytics.
2. Enabled userInput feature flag.
3. Answers Key metrics questions.
4. Go to Admin Settings> Key metrics section.
5. Set viewport between 601px to 653px using dev tool.
6. Text overflows onto 2nd line.

Screenshots

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• On the Key Metrics settings, when previewing / editing User Input questions, the "Edit your answers for more personalized metrics:" text should always expand to the maximum width of the page / container it is in.

Implementation Brief

Review and merge the attached PR which does the following:

• [x] In assets/js/components/user-input/UserInputPreview.js:
  • [x] Remove the <Row> and <Cell> markup and convert the cell to a standard <div>.

Test Coverage

• No new tests required.

QA Brief

• Follow the steps in the feature description and test the Key Metrics Admin settings after filling the questionnaire on every view port.

Changelog entry

[tofumatt]

ACs make sense here, as does the IB 👍🏻

IB ✅

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified the Key Metrics Admin settings after filling the questionnaire on every view port.
• Verified that issue is resolve now.
• Verified that On the Key Metrics settings, when previewing / editing User Input questions, the "Edit your answers for more personalized metrics:" text expand to the maximum width of the page / container it is in.

https://github.com/google/site-kit-wp/assets/94359491/38d7e9ea-cd4c-47de-88f4-5e8ac500b44c