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 {