From 8dbd88bdd34ff714a4a87b5801d4654e04458995 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Fri, 28 Jul 2023 11:47:34 +0200
Subject: [PATCH] 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.
---
 .../src/components/block-tools/style.scss         | 15 ++++++++++++---
 .../components/header/header-toolbar/style.scss   |  4 ++++
 .../header-edit-mode/document-actions/style.scss  |  5 +++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 6ff3bbc721a10a..1f08727bbfb9b1 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/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});
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 694dcb5a2d678a..4a53be477e0258 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/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;
 	}
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 6fe0f858bcc698..a5a182cf7426fd 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/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);