Top toolbar: Fix issues with save button overlap, and plugin buttons (#…

…53101)

* Shorten the width of the top toolbar overlay and make doc title smaller.

* Add a scrim and a margin to handle plugin buttons better.

packages/block-editor/src/components/block-tools/style.scss

@@ -125,9 +125,18 @@
 		display: none;
 	}
 
+	// Add a scrim to the right of the collapsed button.
+	&.is-collapsed::after {
+		content: "";
+		position: absolute;
+		left: 100%;
+		width: $grid-unit-60;
+		height: 100%;
+		background: linear-gradient(to right, $white, transparent);
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
-
 	@include break-medium() {
 		&.is-fixed {
 
@@ -308,7 +317,7 @@
 		}
 	}
 
-	// on tablet vewports the toolbar is fixed
+	// on tablet viewports the toolbar is fixed
 	// on top of interface header and covers the whole header
 	// except for the inserter on the left
 	@include break-medium() {
@@ -328,7 +337,7 @@
 			// in full screen mode we need to account for
 			// the combined with of the tools at the right of the header and the margin left
 			// of the toolbar which includes four buttons
-			width: calc(100% - 240px - #{4 * $grid-unit-80});
+			width: calc(100% - 280px - #{4 * $grid-unit-80});
 		}
 	}
 }

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -82,6 +82,10 @@
 	align-items: center;
 	padding-left: $grid-unit-10;
 
+	// Some plugins add buttons here despite best practices.
+	// Push them a bit rightwards to fit the top toolbar.
+	margin-right: $grid-unit-10;
+
 	@include break-small() {
 		padding-left: $grid-unit-30;
 	}

packages/edit-site/src/components/header-edit-mode/document-actions/style.scss

@@ -13,6 +13,11 @@
 	border-radius: 4px;
 	width: min(100%, 450px);
 
+	// Make the document title shorter in top-toolbar mode, as it has to be covered.
+	.has-fixed-toolbar & {
+		width: min(100%, 380px);
+	}
+
 	.components-button {
 		&:hover {
 			color: var(--wp-block-synced-color);