From 1f97f7f0bc2da82d6bc2f5e73508cc1ba1e9978d Mon Sep 17 00:00:00 2001
From: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Wed, 31 Jul 2024 17:56:56 +0530
Subject: [PATCH] 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 <amitraj2203@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/editor/src/components/post-url/panel.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index be32b40eaf104..aca36566c0472 100644
--- 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>
 	);
 }