Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#50838 closed defect (bug) (fixed)

Width issue on user list table post column

Reported by: justinahinon's profile justinahinon Owned by: audrasjb's profile 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 5 years ago.
50838.patch (294 bytes) - added by justinahinon 5 years 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 4 years 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 4 years ago.
Looks like it solves the issue ;-)
50838.diff (385 bytes) - added by helen 4 years ago.

Download all attachments as: .zip

Change History (19)

@justinahinon
5 years 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
5 years 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
5 years ago

Replying to justinahinon:

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

#3 @SergeyBiryukov
5 years 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.


4 years ago

#5 @kburgoine
4 years ago

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

#6 follow-up: @jipmoors
4 years 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
4 years 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
4 years 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
4 years ago

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

@audrasjb
4 years ago

Looks like it solves the issue ;-)

#9 @audrasjb
4 years 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
4 years 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.


4 years ago

@helen
4 years ago

#12 @helen
4 years 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
4 years ago

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

#14 @helen
4 years 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.