WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 5 weeks ago

#50838 closed defect (bug) (fixed)

Width issue on user list table post column

Reported by: justinahinon Owned by: audrasjb
Milestone: 5.6 Priority: normal
Severity: normal Version: 5.4.2
Component: Users Keywords: has-screenshots has-patch commit
Focuses: ui, css, administration Cc:

Description

In WordPress 5.3.1 French version, the translation of "Posts" in the the table heading here /wp-admin/users.php has been changed from "Articles" to "Publications".

This makes the title of this column spread over two lines instead of one (see screenshot). I guess the behavior should be the same for locales where the translation of "Posts" is very long.

Attachments (5)

Screenshot_101.png (43.8 KB) - added by justinahinon 4 months ago.
50838.patch (294 bytes) - added by justinahinon 4 months ago.
Increase the width of the ".fixed .column-posts" element. This solves the issue, and "Publications" is now displayed on a single line.
50838.1.diff (334 bytes) - added by audrasjb 3 months ago.
Administration: Use hyphens: auto CSS property to fixed list tables columns
Capture d’écran 2020-09-02 à 01.36.16.png (66.3 KB) - added by audrasjb 3 months ago.
Looks like it solves the issue ;-)
50838.diff (385 bytes) - added by helen 5 weeks ago.

Download all attachments as: .zip

Change History (19)

@justinahinon
4 months ago

Increase the width of the ".fixed .column-posts" element. This solves the issue, and "Publications" is now displayed on a single line.

#1 follow-up: @justinahinon
4 months ago

50838.patch fixes the issue. Checking other places where .fixed .column-posts is used to see how they are affected.

#2 in reply to: ↑ 1 @justinahinon
4 months ago

Replying to justinahinon:

Doesn't look like it has been used somewhere else that could lead to a breaking change.

#3 @SergeyBiryukov
4 months ago

  • Component changed from Administration to Users
  • Focuses ui css administration added
  • Milestone changed from Awaiting Review to 5.6
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

Related: #15993

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


3 months ago

#5 @kburgoine
3 months ago

  • Keywords needs-testing added
  • Owner changed from SergeyBiryukov to kburgoine

#6 follow-up: @jipmoors
3 months ago

Looking at the patch, rising the number of pixels seems like a very specific solution.

Me and @tacoverdo were looking at the translations in French and realised that the common translation for "Posts" is "Articles" instead of "Publications".

We think the best way to solve this is to make sure the 3 "Publications" translations are set to "Articles" which require less width.

See https://translate.wordpress.org/consistency/?search=posts&set=fr%2Fdefault&project=1

Also, in Armenic the translation is even longer, which would require 85px width.
To combat this problem, the entire methodology of defining column sizes should be revisited.

Suggesting to closing this issue.

#7 @justinahinon
3 months ago

Thanks for looking @jipmoors @tacoverdo.

@audrasjb what do you think? Since they're different formulations for the same term... I don't recall if this is a point that will be discussed in the nexts FR translation team meetings.

#8 in reply to: ↑ 6 @audrasjb
3 months ago

  • Keywords needs-refresh added

Replying to jipmoors:

Me and @tacoverdo were looking at the translations in French and realised that the common translation for "Posts" is "Articles" instead of "Publications".

We think the best way to solve this is to make sure the 3 "Publications" translations are set to "Articles" which require less width.

Hello @jipmoors,

As fr_FR GTE, I have to kindly disagree :)
"Articles" is used for the "Posts" post type. When we talk about any post type (custom or not), "Publications" need to be used. This translation decision was made around one year ago to to disambiguate the use of "Posts" in different contexts.

I do think the issue is relevant, and we should fix this by using some CSS in WP-Admin list tables.

By the way, I agree the proposed patch is not ideal as it only solves the issue for one language. We need a more universal solution.

I'll try to see if I can help on a patch.

Cheers,
Jb

@audrasjb
3 months ago

Administration: Use hyphens: auto CSS property to fixed list tables columns

@audrasjb
3 months ago

Looks like it solves the issue ;-)

#9 @audrasjb
3 months ago

  • Keywords has-patch added; needs-testing needs-refresh removed
  • Owner changed from kburgoine to audrasjb
  • Status changed from reviewing to accepted

Using hyphens: auto looks like to fix the issue at least on Chrome and Firefox, without touching to the column width. I’m in favor of committing this first step before touching the columns width, which is probably a dangerous rabbit hole :D

#10 @audrasjb
3 months ago

  • Keywords commit added
  • Severity changed from minor to normal

Hi,

Given it's a very minor CSS fix and a very annoying bug (potentially for several Locales), I'd like to propose it for the next minor release. Any thought about that @SergeyBiryukov ?

This ticket was mentioned in Slack in #core by helen. View the logs.


5 weeks ago

@helen
5 weeks ago

#12 @helen
5 weeks ago

50838.diff adds the prefixes using postcss. My testing results on Mac are a bit strange:

  • Chrome (86.0.4240.80): Works, doesn't need prefix.
  • Firefox Developer (83): Does not work, with or without prefixes.
  • Safari (14.0): Does not work on initial load, does require prefix. Oddly, it suddenly applies hyphens when I target it with the dev tools inspector. No idea.

I'm testing this by changing the column title in class-wp-users-list-table.php to replicate that the long text is there on load, just in case results are different if you edit the string in dev tools instead.

I'm happy to commit this if we feel it covers enough cases to be useful, I would just like to know if others see the same thing in testing and what it's like in Windows + MS browsers.

#13 @audrasjb
5 weeks ago

Hey @helen, thank you for adding those prefixes 👍
Patch looks good to ship on my side.

#14 @helen
5 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 49317:

Administration: Accommodate long translations for "Posts" in list table headers.

This stems from longer translations on the User table, but this will apply to any posts column in a list table. Hyphenation should typically just apply to the column header, as the cell contents are just a count.

This does appear to have some browser inconsistencies, so may need further adjustment in the future.

Props audrasjb, justinahinon.
Fixes #50838.

Note: See TracTickets for help on using tickets.