Gutenberg: Document title in document actions area wraps text too early

[noahtallen]

Describe the bug
When the title in the document actions area is too long, it wraps very easily. This causes visual issues and overlaps with the template part title.

To reproduce
Steps to reproduce the behavior:

1. get fse set up
2. navigate to the site editor
3. inspect the document title area, and change the title div to have a lot of text
4. select template part
5. see error

Expected behavior
The text should not wrap at all. If the text is too long, it should probably be truncated. However, in this situation, the text isn't even "too long", it just wraps very early.

Screenshots
Template part selected:

Nothing selected:

[Addison-Stavlo]

It looks like a large contributor to this issue is that the main title has absolute position when has-secondary-label. Because of this, the width of the document actions wrapper is only as wide as the secondary label that is not absolutely positioned. Even with limiting the wrapping, centering and cutting-off overflow also becomes tricky.

Maybe there is a way to do this keeping the absolute position, or maybe we have to get rid of it. but if get rid of it we will also have to redo how the animations are set up since they rely on that absolute positioning. 🤔

[Addison-Stavlo]

I can get the centering / nowrap fixed without changing the absolute positioning. Still thinking about how to handle the best way of handling cutting off overflow for a max-width altogether though. 🤔 With that interior element absolutely positioned, restricting width and cutting off overflow cuts it off from both the right and left.

[noahtallen]

Also want to note we should make sure we have a solution for template part text too.

If we need to, we could explore JS-based truncation approaches like this:

https://github.com/WordPress/gutenberg/blob/b44996c9300fef9fd97246a49ba73ba2a093d71c/packages/block-editor/src/components/block-title/index.js#L62

[Addison-Stavlo]

If we need to, we could explore JS-based truncation approaches like this:

Oh right! That would definitely help.

[vindl]

This was resolved in https://github.com/WordPress/gutenberg/pull/26004.

[jeyip]

Thanks for closing this @vindl 🙏