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);
  }
@@ -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 & {