Making sure long titles and urls don't break the layout.

WordPress · Feb 17, 2021 · 109675a · 109675a
1 parent b0383b5
commit 109675a
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -79,6 +79,7 @@
 	height: auto;
 	width: 100%;
 	text-align: left;
+	margin-top: $grid-unit-05;
 	border-radius: $radius-block-ui;
 	padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 $grid-unit-15;
 	display: flex;
@@ -94,15 +95,15 @@
 
 .block-editor-link-control__search-item-header {
 	flex-grow: 1;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: inline-block;
-	max-width: 280px;
 
 	.block-editor-link-control__search-item-title {
 		display: block;
 		font-size: 13px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 200px;
+		min-width: 100%;
 
 		.is-url &,
 		.is-url & mark {
@@ -114,6 +115,10 @@
 		display: block;
 		font-size: 12px;
 		color: $gray-700;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 200px;
 	}
 }