PoC: Set a page content max-width for the plugin and settings.

[benbowler]

Summary

Addresses issue:

• Add maximum width constraint to the dashboard and settings screens #9599

Relevant technical choices

PoC PR, requires additional work such as accounting for the WP menu to get over the line.

PR Author Checklist

• My code is tested and passes existing unit tests.
• My code has an appropriate set of unit tests which all pass.
• My code is backward-compatible with WordPress 5.2 and PHP 7.4.
• My code follows the WordPress coding standards.
• My code has proper inline documentation.
• I have added a QA Brief on the issue linked above.
• I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Code Reviewer Checklist

• Run the code.
• Ensure the acceptance criteria are satisfied.
• Reassess the implementation with the IB.
• Ensure no unrelated changes are included.
• Ensure CI checks pass.
• Check Storybook where applicable.
• Ensure there is a QA Brief.
• Ensure there are no unexpected significant changes to file sizes.

Merge Reviewer Checklist

• Ensure the PR has the correct target branch.
• Double-check that the PR is okay to be merged.
• Ensure the corresponding issue has a ZenHub release assigned.
• Add a changelog message to the issue.

[benbowler]

As noted here, over the content max width the overlay notification position does not account for the collapsed state of the WordPress menu. This means that the notifications distance from the right of the page content column changes when opening and closes the menu.

We can address this in the final ticket using an approach similar to the user input app. I will add this to the main IB to be implemented there.

[techanvil]

We should short-circuit this useSelect() callback to avoid making a potentially unneeded request to the survey endpoint on page load.

Plus, rename the state variables as it's no longer rendering the portal.

Suggested change

	const [ showSurveyPortal, setShowSurveyPortal ] = useState( false );
	const currentSurvey = useSelect( ( select ) =>
	select( CORE_SITE ).isUsingProxy() &&
	select( CORE_USER ).areSurveysOnCooldown() === false
	? select( CORE_USER ).getCurrentSurvey()
	: null
	);
	const [ showSurvey, setShowSurvey ] = useState( false );
	const showCurrentSurvey = useSelect( ( select ) =>
	showSurvey &&
	select( CORE_SITE ).isUsingProxy() &&
	select( CORE_USER ).areSurveysOnCooldown() === false
	? select( CORE_USER ).getCurrentSurvey()
	: null
	);

[techanvil]

Arguably this rule should kick in from min-width: $page-content-max-width + 1, but in practical terms it won't make a difference to leave as-is...