Page MenuHomePhabricator

Texts in Czech are too long to display well
Closed, ResolvedPublic

Description

From ambassadors' chat (written by @Urbanecm):

@RHo Czech texts are (again 🙂) too long. I've already chosen shorter synonym for "Jednoduché" ("Snadné"), which does fit (at least when changing through browser developer console), but it's going to be harder for "Středně obtížné".

Would it be possible to indent the second line a little bit, so it looks better for Czech users?

@RHo said she will provide CSS improvements to @Catrope.

Details

Related Gerrit Patches:
mediawiki/extensions/GrowthExperiments : masterStartEditingDialog: Prevent difficulty labels from wrapping

Event Timeline

Urbanecm created this task.Oct 30 2019, 2:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 30 2019, 2:37 PM

Change 547669 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Prevent difficulty labels from wrapping

https://gerrit.wikimedia.org/r/547669

BeforeAfter

@RHo I had to change your CSS a little bit. Because of the weird way that widths of table columns are negotiated, the width: max-content trick you found doesn't work well. It worked in your codepen, but once I changed the text in the right-hand column to the Czech text (and applied the 700px width constraint and 14px font size used in the dialog), the extra width of that text caused the right column to grow and the left column to shrink, so the "Středně obtížné" text still wraps. The solution I found was to keep width: 20% (which functions more like a min-width, and min-width itself doesn't work), then preventing wrapping using white-space: nowrap

Change 547669 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Prevent difficulty labels from wrapping

https://gerrit.wikimedia.org/r/547669

Etonkovidova added a subscriber: Etonkovidova.

For Design review
Desktop

Mobile (checked on a real device and in a browser emulator):

The mobile version of this overlay is a different, more mobile-friendly single column layout:
https://wikimedia.invisionapp.com/share/2TU9L4HJAKW#/387501623_NH-Mobile_-_Add_SE_Overlay_-_Task_Difficulty

Note the image is also different (it is Difficulty-landscape-rtl.svg found in T235444) to accommodate the mobile format.

MMiller_WMF closed this task as Resolved.Wed, Nov 13, 1:06 AM
MMiller_WMF claimed this task.
MMiller_WMF added a subscriber: MMiller_WMF.

Because everything on here is resolved except for the single-column layout and image issues, I am resolving this task in favor of T236854: [mobile] Newcomer tasks - UI issues with Suggested edits module and Difficulty overlay, which covers both those issues.