Fix the title badge size and let the title text overflow with ellipsis

WordPress · May 16, 2024 · 078d1e5 · 078d1e5
1 parent 82dfa59
commit 078d1e5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -315,8 +315,10 @@ export default function PagePages() {
 								__( '(no title)' ) }
 						</Link>
 					) : (
-						decodeEntities( item.title?.rendered ) ||
-						__( '(no title)' )
+						<span>
+							{ decodeEntities( item.title?.rendered ) ||
+								__( '(no title)' ) }
+						</span>
 					);
 
 					let suffix = '';
@@ -335,7 +337,10 @@ export default function PagePages() {
 					}
 
 					return (
-						<HStack justify="stretch">
+						<HStack
+							className="edit-site-page-pages-title"
+							justify="stretch"
+						>
 							{ title }
 							{ suffix }
 						</HStack>

diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
@@ -52,6 +52,11 @@
 	}
 }
 
+.edit-site-page-pages-title span {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
 .edit-site-page-pages__title-badge {
 	background: $gray-100;
 	color: $gray-700;
@@ -60,5 +65,5 @@
 	border-radius: $radius-block-ui;
 	font-size: 12px;
 	font-weight: 400;
-	width: fit-content;
+	min-width: 80px !important; // Override HStack min-width: 0
 }