From 926087ba9107cadb343ee85075b3c4f8ef318520 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 2 Aug 2023 18:00:00 +0100
Subject: [PATCH] Fix document title alignment in command palette button
 (#53224)

---
 .../header-edit-mode/document-actions/style.scss  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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 cfaed598304055..02bc40f4259f52 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
@@ -17,6 +17,10 @@
 		width: min(100%, 380px);
 	}
 
+	&:hover {
+		background-color: $gray-200;
+	}
+
 	.components-button {
 		border-radius: $grid-unit-05;
 
@@ -26,10 +30,6 @@
 		}
 	}
 
-	@include break-medium() {
-		width: 50%;
-	}
-
 	@include break-large() {
 		width: min(100%, 450px);
 	}
@@ -54,6 +54,9 @@
 	flex-grow: 1;
 	overflow: hidden;
 
+	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
+	padding-left: $grid-unit-40;
+
 	&:hover {
 		color: var(--wp-block-synced-color);
 	}
@@ -67,6 +70,7 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		max-width: 50%;
 	}
 
 	.edit-site-document-actions.is-page & {
@@ -90,6 +94,7 @@
 
 .edit-site-document-actions__shortcut {
 	color: $gray-800;
+	min-width: $grid-unit-40;
 }
 
 .edit-site-document-actions__back.components-button.has-icon.has-text {
@@ -98,9 +103,11 @@
 	color: $gray-700;
 	gap: 0;
 	z-index: 1;
+	position: absolute;
 
 	&:hover {
 		color: currentColor;
+		background-color: transparent;
 	}
 
 	.edit-site-document-actions.is-animated & {