fix: correct alignment issues in preview mode

[kathleenkhy]

Problem

There were alignment issues found where the text would bleed out of the page and container if the text is too long.

Root cause: Originally, the width of the Stack component in PaymentEndPagePreview.tsx was not indicated to be 100%, which might have caused the text to bleed since no width was defined. In the Edit mode and the actual Thank You Page (which worked as intended and the text did not bleed), the widths were defined as 100%.

Closes FRM-1656

Solution

• Fixed alignment and width of the component such that the text does not bleed beyond the page
• Fixed padding of components in mobile view
• Fixed padding of preview banner warning

Breaking Changes

• No - this PR is backwards compatible

Before & After Screenshots

BEFORE:

Mobile View

AFTER:

Desktop View

Mobile View

Tests

• Add a payment variable to a form
• Edit the Thank You page such that the title and follow-up instructions are very long
• Click on the Preview (eye) button of the form in admin mode to enter Preview mode
• The title and follow up instructions text (which are very long) should still be within the Summary table
• In mobile view, the preview banner instructions and components should have sufficient padding

[linear]

FRM-1656 Fix alignment for really long title and paragraph for payments form preview

[KenLSM]

@kathleenkhy could we have some commentary, added on the Problem Section of the PR message, on how this occurred (a mini-root cause analysis).

Was it a regression introduced by the previous PR? i.e.:

• it was a new component introduced in the previous PR that didn't have the correct styles?
• existing issue?

[KenLSM]

@kathleenkhy Sorry for being so anal on your PRs -- we don't usually do a full RCA on the PR itself, but since these are your first few PRs, we want to be a little more hands-on to make sure that we're taking away lessons whenever possible.

[kathleenkhy]

@KenLSM no worries and thanks for the feedback 🙂! I added the finding I had in the problem section (I didn't define the width as 100% which caused the text to bleed)! Lmk if I should add more details!

[KenLSM]

LGTM! (did pair programming to reduce the changes required)