Purchase Settings: Update manage-purchase__header styles for better wrapping

[jjchrisdiehl]

The Purchase Settings section doesn't handle text wrapping correctly in both the header and content components:

320px	425px	870px

I also noticed that the manage-purchase__renew-upgrade-buttons are set to display: none on smaller devices and...I'm not sure why.

So along with the refactor of the header I also moved the renewal/upgrade buttons into the header section and added styling so they adjust their position across device sizes:

< 480px	< 660px	Desktop

All units have been converted to their relative counterparts, i.e margin-inline-start or flex-start/end so this should remain responsive for LTR languages too.

Related to #98958

Testing Instructions

• Go to Purchases and select a purchase to open its Purchase Settings - its best to try a product with a long string of text, like a very long domain name (but try a number of products to hedge against any regressions)
• From there, open dev tools and adjust the window width to test out the new flexibility of the text and buttons
• Try a LTR language, it should behave similarly
• There shouldn't be any horizontal or vertical scrolling or clipping in the manage-purchase__header or manage-purchase__content sections

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-d5bd98ba0d9998554aa9919462b64dad6fe1d19f

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-d5bd98ba0d9998554aa9919462b64dad6fe1d19f&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-d5bd98ba0d9998554aa9919462b64dad6fe1d19f&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~4 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases        +44 B  (+0.0%)       +4 B  (+0.0%)
purchases             +44 B  (+0.0%)       +4 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[sirbrillig]

Looks good!