Bulk edit and quickedit needs more space for longer translations

[zodiac1978]

In #25753 we introduced more space (5em was the default, we needed 7em) for .locale-de-de .inline-edit-row fieldset label span.title in the German locale.

After that, #28303 added this change to the new formal locale .locale-de-de-formal

But in #33212 this was removed again by @ocean90 and the new default was 6em.

This wasn't enough for ru_RU which got 8em.

In WordPress 6.2 the string "Parent" was translated with "Eltern" and for this 6em was okay:
​https://translate.wordpress.org/projects/wp/6.2.x/admin/de/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=16083988&filters%5Btranslation_id%5D=105887217

But in WordPress 6.3 this was changed to "Übergeordnet":
​https://translate.wordpress.org/projects/wp/6.3.x/de/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=16507337&filters%5Btranslation_id%5D=109126351

Now the translation is too long and 6em space is not sufficient anymore.

Re-adding the 7em width would solve this issue again.

There is also the same problem with the Polish locale which has a very long translation:
​https://translate.wordpress.org/projects/wp/dev/pl/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=16087645&filters%5Btranslation_id%5D=106835593

[zodiac1978]

Broken layout in German locale (bulk edit)

[zodiac1978]

Broken layout in German locale (quick edit)

[zodiac1978]

Broken layout in Polish locale

[zodiac1978]

Fixed layout in German locale (bulk edit) - 7em space

[zodiac1978]

Fixed layout in German locale (quick edit) - 7em space

[zodiac1978]

Modify width to 7em only for de (formal) locale

[zodiac1978]

I think there are 3 possible solutions here:

• We could change the translation to a shorter string - I think this was an intentional change, because "Übergeordnet" is much better than the literal translation of "Parent" with "Eltern".
• We could switch to a better CSS design using flexbox or grid, but as I understand, this would need more markup changes and as the admin design will get a refresh in the future this sounds like the wrong approach.
• We could re-introduce the bigger width for the German locale (which is provided in the patch).

This does not fix the problem with the Polish translation, but I pinged someone from the Polish community to take a look. Maybe they can fix it with shortening the string.

Edit: Here is the link for the ​Polish translation.

[oglekler]

I think there can be simple enough CSS patch: flex to label, margin:auto to children, line-height:1.4 for .title. I believe that making exceptions for different locales is not the right things to do.

[zodiac1978]

Replying to oglekler:

I think there can be simple enough CSS patch: flex to label, margin:auto to children, line-height:1.4 for .title. I believe that making exceptions for different locales is not the right things to do.

I do not think there is an easy CSS patch possible with the current markup. We either make an exception for some locales or we raise the width for all. It is an easy fix which was already used in the past.

Fiddling with markup and CSS will mean to punt this ticket as this will be not ready for 6.6 in time.

[nhrrob]

We have reviewed this in today's bug scrub.
Looks like it won't be ready for 6.6

Punting to the next release 6.7.

[zodiac1978]

Replying to nhrrob:

We have reviewed this in today's bug scrub.
Looks like it won't be ready for 6.6

Punting to the next release 6.7.

This is such a disappointing decision. There is a patch available, and the other options do not make any sense with the upcoming redesign of the admin area in mind. Why don't we fix it in the meantime?

This locale specific solution was used before and for other problems of the same kind.

Pinging @ocean90 and @swissspidy for a second opinion on this matter.

[swissspidy]

I think there can be simple enough CSS patch: flex to label, margin:auto to children, line-height:1.4 for .title. I believe that making exceptions for different locales is not the right things to do.

I do not think there is an easy CSS patch possible with the current markup. We either make an exception for some locales or we raise the width for all. It is an easy fix which was already used in the past.

Fiddling with markup and CSS will mean to punt this ticket as this will be not ready for 6.6 in time.

Well, has this been tested already? Maybe as a quick mockup in the browser's dev tools?

If it's too complex then something like the current patch is an OK solution for now, unless many more locales are affected. Keep in mind though it only works for de_DE, not de_AT or de_CH.

There is also the same problem with the Polish locale which has a very long translation

Are any other locales affected?

[zodiac1978]

Replying to swissspidy:

Well, has this been tested already? Maybe as a quick mockup in the browser's dev tools?

I couldn't get this working with just CSS in the browser dev tools. This is because every row has no connection to the other rows, therefore the width of one column has no effect to other columns.

I think the checkbox in the bulk edit variant make it even more difficult.

If it's too complex then something like the current patch is an OK solution for now, unless many more locales are affected. Keep in mind though it only works for de_DE, not de_AT or de_CH.

As de_AT and de_CH are copying from DE, every of those locales is affected:
de_DE, de_DE-formal, de_AT, de_CH, de_CH-informal

We could also try to use an attribute selector to shorten this up:
Something like body[class*="locale-de-"]

Are any other locales affected?

I am not 100% sure, but checked many and the DE variants and Polish were the only ones I found.

Fix with Grid

Trac ticket: https://core.trac.wordpress.org/ticket/60851

Line height change

Trac ticket: https://core.trac.wordpress.org/ticket/60851

[oglekler]

@zodiac1978 can you take a look at two possible options I suggested? There is little time, but I think we still can finalize the solution or make an improvement this release and move further work to the next. I also don't like breakable layout and think that this should be fixed.

[zodiac1978]

Replying to oglekler:

@zodiac1978 can you take a look at two possible options I suggested? There is little time, but I think we still can finalize the solution or make an improvement this release and move further work to the next. I also don't like breakable layout and think that this should be fixed.

You only provided a screenshot for Bulk Edit. For me both version are still broken with using the "Quickedit" link.

It is working for the "Selects", but still broken for "Input" and the "Checkbox" is even more difficult. This should be next to the text ...

[zodiac1978]

Broken layout in Quickedit view

[oglekler]

@zodiac1978, sorry, I did only Bulk Edit to make my point that this can be fixed without special exceptions 🤷 There are two possible options to choose from, with their pros and cons. Grid is more flexible, but I am not sure that it's support is good enough for our case: ​https://caniuse.com/css-subgrid

[zodiac1978]

Word break layout issue with CSS version 1

[zodiac1978]

Word break layout issue with CSS version 1 and more issues (Quickedit)

[zodiac1978]

Let me sum it up:

Fiddling with markup and CSS will mean to punt this ticket as this will be not ready for 6.6 in time.

If it's too complex then something like the current patch is an OK solution for now, unless many more locales are affected. Keep in mind though it only works for de_DE, not de_AT or de_CH.

As de_AT and de_CH are copying from DE, every of those locales is affected:
de_DE, de_DE-formal, de_AT, de_CH, de_CH-informal

We could also try to use an attribute selector to shorten this up:
Something like body[class*="locale-de-"]

I would suggest using my approach for now and fix this better in 6.7 in a new ticket. This needs more time for research and discussion to fix this in a more modern and dynamic way.

[zodiac1978]

Patch #2 targeting every de locale

[oglekler]

@swissspidy what do you think? I don't like an idea of temporarily fixes, but this one is quite simple. I have doubts if this is an enhancement as well, because it looks like a bug fix.

[swissspidy]

I think it's fine to fix this like this for now.

[swissspidy]

In 58325:

Quick/Bulk Edit: Adjust label width to accommodate longer translations.

Specifically handles de_* locales.

Previously: [33598] / #33212.

Props zodiac1978, oglekler.
Fixes #60851.

[zodiac1978]

Fixing incorrect patch after some wrong copy&paste

[zodiac1978]

@swissspidy I don't know if I need to open a new ticket or if this could be handled here.

I copied the same selector twice and missed some (compared to the same fix for ru_RU locale).

60851.3.diff fixes both.

There is still one negligible error:

With our patch we override .quick-edit-row-post fieldset.inline-edit-col-right label span.title which has a width set to auto and this is now set to 7em. But as this creates no layout error, I think it could stay this way.

[zodiac1978]

Now mobile fix also included (like for ru_RU and lt_LT)

[zodiac1978]

We could also fix the last mentioned layout issue with this code:

body[class*="locale-de-"] .quick-edit-row-post fieldset.inline-edit-col-right label span.title,
.locale-ru-ru .quick-edit-row-post fieldset.inline-edit-col-right label span.title,
.locale-lt-lt .quick-edit-row-post fieldset.inline-edit-col-right label span.title {
	width: auto;
}

[zodiac1978]

Additionally fix some minor layout issue for the quickedit status label

[swissspidy]

In 58411:

Quick/Bulk Edit: Further adjust label width for translations. after [58325]

Props zodiac1978.
Fixes #60851.