From 8f32b97936032fdfa7b4f2079cc29a2bb201415c Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 11 Aug 2022 12:02:17 +1000
Subject: [PATCH] List View: Ensure long anchors don't cause the List View to
 extend

---
 .../components/list-view/block-select-button.js   |  9 +++++++--
 .../src/components/list-view/style.scss           | 15 +++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

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(
 						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
 					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor">
-							{ blockInformation.anchor }
+						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+							<Truncate
+								className="block-editor-list-view-block-select-button__anchor"
+								ellipsizeMode="auto"
+							>
+								{ blockInformation.anchor }
+							</Truncate>
 						</span>
 					) }
 					{ 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 {