Widen dash container: changing mast head and content area max widths

[jeffgolenski]

Widen dash container: changing mast head and content area max widths to
match those of calypso.

Fixes #9298

Before:

After:

Testing instructions:

1. Run this branch
2. Visit jetpack dashboard and settings areas
3. Enjoy a wider experience on large screens

Proposed changelog entry for your changes:

"We've made the Jetpack dashboard wider on large screens for a better experience"

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: January 10, 2019.
Scheduled code freeze: January 3, 2019

Generated by 🚫 dangerJS

[jeherve]

It seems we lost some of the extra space in the header on smaller widths:

vs. in the latest stable:

The problem is the same with the old modules' list (wp-admin/admin.php?page=jetpack_modules);

[jeffgolenski]

@jeherve Great find! I've made an adjustment and now the container has plenty of padding no matter the screen size.

Video attached: https://cloudup.com/cp3Q8rGuzJy

[keoshi]

Looks good in my testing!

One nitpick is with the illustrations in the promo cards that have .jp-apps-card__top img { max-width: 40%; padding-top: 10px; }. That max-width paired with the wider wrapper makes these images take a lot of vertical space.

[keoshi]

@jeffgolenski One more thing: can we use the default breakpoints instead of fixed values here?

jetpack/scss/_utilities/mixins/_breakpoint.scss

Lines 18 to 25 in f8078c2

	$breakpoints:(
	phone: 320px,
	large-phone: 530px,
	phablet: 600px,
	tablet: 782px,
	desktop: 900px,
	large-desktop: 1147px,
	);

[jeffgolenski]

@keoshi I opted to create a specific breakpoint here because that's where it was needed. With the wp-admin sidebar, the 1250px was needed. I didn't think it warranted creating a new breakpoint in the scss though, since its only used once. 1147px was too small to fix the issue.

Changes have been made

[jeherve]

Looking good now. Merging.