Fix coming soon page mobile UI issues

[chihsuan]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

p1715675706047389-slack-C01SFMVEYAK

Fix coming soon page not displaying correctly on mobile view

• Add min-width to body tag to prevent the page from being too small on mobile view
• Adjust padding for smaller screens
• Update font size and text wrapping for banner. Even after adding text-wrap: balance or  , the window issue still exists with the banner text with Samsung Galaxy S8+ because the font size was really too large. So, I referred to the editor and made the necessary changes (use clamp()) to the font size to make it look better on mobile view.

Both text-wrap: balance and   should work for the banner text. But I used text-wrap: balance in the PR because I found we used text-wrap in WordPress.com p7H4VZ-4Hm-p2#comment-11820 and seems it's a better way to handle the text wrapping issue. Besides, I think that would still prevent the text from being cut off if users change the banner text

Before:

Samsung Galaxy S8+ - without font size adjustment

Samsung Galaxy S8+ - with font size adjustment

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Create a fresh site with launch-your-store feature flag enabled.
2. Skip the setup wizard
3. Go to frontend in incognito mode
4. Check the coming soon page looks good on mobile view

Screen.Recording.2024-05-15.at.11.43.32.mov

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[chihsuan]

I set the font size to 48px in the site editor and copied-pasted this value from the applied CSS.

The syntax for clamp() is:

clamp(minimum, preferred, maximum)

• Minimum Value: 27.894px
• Preferred Value: 1.743rem + ((1vw - 3.2px) * 2.094)
• Maximum Value: 48px

[adrianduffell]

Nitpick: It sounds like you copied the values out of the editor, but perhaps we should round the numbers to ease readability 🤔

[chihsuan]

Sounds good! Thanks for the suggestion.

[chihsuan]

Updated in f6bd20e

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[github-actions]

Hi @adrianduffell, @rjchow, @woocommerce/ghidorah

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[adrianduffell]

Thanks @chihsuan, this is testing great and LGTM. I tried it in various different mobile and tablet sizes. I just left a nitpick but feel free to ignore 🚀

[adrianduffell]

Nitpick: It sounds like you copied the values out of the editor, but perhaps we should round the numbers to ease readability 🤔

[ilyasfoo]

Tests well, LGTM! 🚢