Fix long template name UI break issue

[itzmekhokan]

Fixes #61702

Screenshot

Before

After applying PR - #61703

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: itzmekhokan <khokansardar@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Mamaduka]

Thanks, @itzmekhokan!

Can you share before and after screenshots in the PR description? It also helps to include testing instructions.

[itzmekhokan]

Thanks, @itzmekhokan!

Can you share before and after screenshots in the PR description? It also helps to include testing instructions.

@Mamaduka screenshot added for ref.

[jasmussen]

Thanks for diving in here, we do need this one fixed. However I'm taking a bit of a different approach in #61492, allowing them to wrap onto two lines, but with better alignment and wrapping. I think we should do the same here. And the same feedback as was given on my PR probably applies: instead of adding classnames and custom CSS for those pieces, can we fix this at the component level?

If you're able to do that, I'm happy to close my PR in favor of yours! 🙏

[itzmekhokan]

Thanks for diving in here, we do need this one fixed. However I'm taking a bit of a different approach in #61492, allowing them to wrap onto two lines, but with better alignment and wrapping. I think we should do the same here. And the same feedback as was given on my PR probably applies: instead of adding classnames and custom CSS for those pieces, can we fix this at the component level?

If you're able to do that, I'm happy to close my PR in favor of yours! 🙏

@jasmussen thanks for your suggestions. I have tried a better approch for component level updation and updated same in my PR. Please check it once.
Now its look fine -

[jameskoster]

I wonder if 'Link' should truncate given it can potentially be very long and wrap onto several lines?

[jasmussen]

I wonder if 'Link' should truncate given it can potentially be very long and wrap onto several lines?

I think there was some context on the link UI about not doing this. CC: @richtabor

[richtabor]

I think there was some context on the link UI about not doing this. CC: @richtabor

Because it can be very long, with just as much confidence that it is the correct link as just seeing the first X characters.

As an aside, why is it titled "Link"?