Try: Smoother animation for the main content area.

This PR tries to add additional animation when the sidebar open/closes. Specifically, it now animates the right-margin in lockstep with the sidebar opening and closing. This causes the main body content to animate, just like the sidebar, for a nicer experience.

However in order to be performant, this means we add `will-change: transform;` to the .edit-post__layout-content`. This is causing an issue with the notices, which will be moot when #13614 gets merged, so *this PR is dependant on that landing first*.

Secondly, although it's a small PR, the addition of the will-change property is likely going to need a lot of testing so it doesn't cause regressions. Things to look for are absolute, fixed, or sticky position elements and the like. In my own testing, only the notices regressed which as mentioned gets fixed when 13614 lands. But this will still need a lot of eyes.

packages/edit-post/src/components/layout/style.scss

@@ -81,6 +81,9 @@
 	// In the mean time, if a user has a small screen and lots of plugin-added menu items in the navigation menu,
 	// they have to be able to scroll. To accommodate the flyout menus, we scroll the `body` element for this.
 	@include break-medium() {
+		transition: margin-right 0.1s cubic-bezier(0, 0, 0.2, 1);
+		will-change: transform;
+
 		// Because the body element scrolls the navigation sidebar, we have to use position fixed here.
 		// Otherwise you would scroll the editing canvas out of view when you scroll the sidebar.
 		position: fixed;
@@ -173,7 +176,7 @@
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
 		transform: translateX(+100%);
-		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
+		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards cubic-bezier(0, 0, 0.2, 1);
 
 		body.is-fullscreen-mode & {
 			top: 0;