diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index 661bbec4dbfc46..9477eb2cda40c0 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -90,8 +90,13 @@ function ListViewBlockSelectButton( { blockTitle } { blockInformation?.anchor && ( - - { blockInformation.anchor } + + + { blockInformation.anchor } + ) } { isLocked && ( diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 4fce1136bdbd5a..ce5539dbe3aa7f 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -312,14 +312,21 @@ } } + .block-editor-list-view-block-select-button__anchor-wrapper { + position: relative; + max-width: min(110px, 40%); + width: 100%; + } + .block-editor-list-view-block-select-button__anchor { + position: absolute; + right: 0; + transform: translateY(-50%); background: rgba($black, 0.1); border-radius: $radius-block-ui; - display: inline-block; padding: 2px 6px; - max-width: min(100px, 40%); - overflow: hidden; - text-overflow: ellipsis; + max-width: 100%; + box-sizing: border-box; } &.is-selected .block-editor-list-view-block-select-button__anchor {