Reader Onboarding: Remove wide screen flex style

[DustyReagan]

Related to https://github.com/Automattic/loop/issues/319

Proposed Changes

• Removes the Reader Onboarding panel's widescreen style because Reader Onboarding is constrained to the stream column max-width and, therefore, only goes "widescreen" on a very narrow range of browser widths.
• To decrease the vertical space consumed by Reader Onboarding this PR floats the progress circle to the right of the header and reduces the margin between the header and steps.

Narrow style on desktop:

Before	After

Wide style (now narrow style in the after) on desktop:

Before	After

Mobile view:

Before	After

Why are these changes being made?

• Improve UX by decreasing the amount of space taken up by Reader Onboarding.

Testing Instructions

• The easiest way to test this is to create a new account on Calypso Live via /start/reader/user-social That should direct your to /reader
• On /reader view Reader Onboarding in various widths and on mobile. Does it look good?

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132308

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center
• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/reader-onboarding-style on your sandbox.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[mehmoodak]

Looks Good 🚢