Long slugs breaking summary panel UI (#64053)

* fix: long slugs breaking summary panel UI * refactor: Update styles for post URL to truncate the button when the URL is extremely long * Addressed feedback Co-authored-by: amitraj2203 <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: akasunil <[email protected]> Co-authored-by: Mamaduka <[email protected]>
WordPress · Jul 31, 2024 · 1f97f7f · 1f97f7f
1 parent b1628c0
commit 1f97f7f
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
@@ -3,7 +3,11 @@
  */
 import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+	Dropdown,
+	Button,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
@@ -86,7 +90,9 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ isFrontPage ? postLink : <>/{ decodedSlug }</> }
+			<Truncate numberOfLines={ 1 }>
+				{ isFrontPage ? postLink : `/${ decodedSlug }` }
+			</Truncate>
 		</Button>
 	);
 }