Fix document title alignment in command palette button (#53224)

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);
 	}
@@ -46,6 +46,9 @@
 	color: var(--wp-block-synced-color);
 	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);
 	}
@@ -60,6 +63,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		color: var(--wp-block-synced-color);
+		max-width: 50%;
 	}
 
 	.edit-site-document-actions.is-page & {
@@ -83,6 +87,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 {
@@ -91,9 +96,11 @@
 	color: $gray-700;
 	gap: 0;
 	z-index: 1;
+	position: absolute;
 
 	&:hover {
 		color: currentColor;
+		background-color: transparent;
 	}
 
 	.edit-site-document-actions.is-animated & {