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 & {