Pattern editing (Manage all my patterns): Sync status overlaps for some languages

[carolinan]

Description

When you edit a user created pattern, the sync status in the pattern sidebar overlaps for some languages.

Step-by-step reproduction instructions

First, create a pattern.
Go to Site Editor > Patterns > Manage all my patterns.
In the admin interface select the pattern to edit.
In the editor, open the pattern sidebar.

Note that Site Editor > Patterns > My Patterns > Edit any pattern does not have the synced status in the sidebar.

Screenshots, screen recording, code snippet

English:

Swedish translation:

German translation:

Environment info

Gutenberg trunk

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

[carolinan]

Related: #51451

[glendaviesnz]

It looks like this is a problem for the whole summary panel layout as the sync status just copies the flex layout of the existing params:

Have flagged it as needing design feedback as it would be good to look for a solution that works for this whole panel rather than just fixing the sync status.

[annezazu]

Adding to 6.3 in case we can iterate it time and, if not, to have it on the radar for point releases cc @WordPress/gutenberg-design

[jameskoster]

Agree the whole Summary panel could use some design love.

In the short term, could we use word-break to account for extra-long words like this? It's not perfect by a long stretch, but probably preferable to the overlapping label/value.

[ndiego]

In the short term, could we use word-break to account for extra-long words like this? It's not perfect by a long stretch, but probably preferable to the overlapping label/value.

@jameskoster think we can get this in for 6.3, or will we need to punt this to 6.3.x?

[t-hamano]

I too would prefer to use word-break for now. There are approaches like #52249 that wrap columns, but it seems unnatural that only certain items are wrapped.

It would look like this.

German:

Swedish:

[jasmussen]

☝️ I think that can work, but can we top-align instead of middle align? I.e. note how the first line for each row aligns across here:

[t-hamano]

but can we top-align instead of middle align?

I think this is a good idea; like the URL row, this row also has a unique class name (.edit-post-sync-status), so applying the style should not be difficult.

I would like to submit a PR immediately if I may, but since the last RC release party has just started, it might be a good idea to punt to 6.3.x.