Data Views: "Empty pattern" overlaps pattern name in table layout

[carolinan]

Description

When viewing all patterns on Appearance > Editor > Patterns using the table layout, the text that explains that a pattern is empty overlaps the pattern name. This makes the text difficult to read.

• I only tested with English, no translations.

Step-by-step reproduction instructions

Create a new empty pattern.
Go to Appearance > Editor > Patterns
Select the table layout.
Locate the pattern in the table. Confirm if the text overlaps.

Screenshots, screen recording, code snippet

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[t-hamano]

Related: #59098

Instead of text, an icon or image that represents the "empty" state may be appropriate.

[dhruvang21]

@t-hamano can we change css for the preview text by changing it to whitespace: wrap from nowrap

[t-hamano]

can we change css for the preview text by changing it to whitespace: wrap from nowrap

I think this approach is fine as a temporary solution for future improvements.

However, when this text is localized, it's not guaranteed that one word will fit on one line. I think it's necessary to test it in various languages.

[dhruvang21]

@t-hamano, I agree with your thoughts that this can be used as a temporary fix. However, for the future, I suggest adding an icon that aligns with the design while also ensuring accessibility. It’s important to make sure that users can clearly understand the pattern, possibly through the icon itself.