Permalink URL: make long permalinks more readable

[afercia]

Description

Long URLs are hardly readable when split in multiple lines. Maybe it's one of the less readale things. The Edit permalink UI doesn't do a great job in making long URLs more readable for a couple reasons:

1. The current permalink value is shown in the Settings panel, which has a limited width of only 280 pixels.
2. Even when editing the permalink, the popover that shows the editing UI has a limited width.

In both cases, long URLs are split into multiple lines. Screenshot:

I feel this is a problem that is still unsolved in the editor. The readability is not better than how it was in the old classic editor.

Regarding the first point, I'd like to avoid to reinstate a long discussion about the 'sidebar' design paradigm. To me, it's an insufficient paradigm that comes with many accessibility problems and it's just not aligned with the need of modern applications. I've remarked that in several previous issues but, fair enough, let's ignore the sidebar issue for now.

I'd like to focus on the popover instead.

Is there any reason why the Permalink popover must have a limited width?
I do realize that for visual consistency, popovers should have more or less the same width when it makes sense. This specific popover needs to show long text though, and I'd think providing better readability is better than visual consistency.

When there is available space, this popover should be larger, to show the Permalink URL in a single line (at least, till a certain length). Screenshot:

Even better:
In the classic editor, when the last part of the Permalink (usually the post name) is longer than 34 characters, it gets 'abridged' and split in two parts of maximum 16 characters with an ellipsis in between:

The equivalent of this in Gutenberg would be something like the UI in the screenshot below:

Any thoughts and feedback welcome.

Step-by-step reproduction instructions

• Create a post with a very long title so that the permalink is very long.
• Publish.
• Observe the Permalink UI in the Settings panel: the URL is split in multiple lines.
• Edit the Permalink.
• Observe the URL is split in multiple lines also in the permalink popover.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes