902705 - [meta] Tab titles are truncated in the Email Search filter, throughout multiple locales

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::E-Mail, defect)

Description

[Delphine Lebédel [:delphine - Use needinfo]]

Filed this bug to track other instances in v1.1, since it very often happens that tab titles are truncated in the Email Search filter, throughout multiple locales

We have asked localizers to find workarounds when possible for this, however this is not a long term solution

Comment 1

[Delphine Lebédel [:delphine - Use needinfo]]

Issue repros in Greek, German, Croatian, Hungarian, Dutch, Turkish, Catalan

Comment 2

[Andrew Sutherland [:asuth] (he/him)]

Quoting my comment from https://bugzilla.mozilla.org/show_bug.cgi?id=894696#c4 since this is the meta bug for this:

===
This is largely a UX or Visual Design call.  The options I can think of involve some combination of the below:
- Make the font smaller.
- Reduce the padding
- Make the text flow across two lines

The good news is that the localization engine is secretly much more powerful than you would expect.  You can set any arbitrary attribute value on a localized node tagged with a data-l10n-id that you want.  For example, the "style" attribute that lets you put CSS styling on.  While this should only be used as a last resort, this seems like a last resort type of thing.

Here's the CSS we're dealing with from https://github.com/mozilla-b2g/gaia/blob/v1-train/shared/style_unstable/tabs.css#L156
[role="tablist"][data-type="filter"] > [role="tab"] > a {
  display: block;
  padding: 0 0.5rem;
  text-decoration: none;
  color: #737272;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: transparent;
  font: normal 1.6rem/4rem "MozTT", Sans-serif;
  width: auto;
  float: none;
}

The key bit for us is the font line that nets us the equivalent of "font-size: 1.6rem;" and probably the padding directive which is putting padding on both sides.

As such, I suggest adding a property like so to the properties file for this locale and any other affected locales:

message-search-from.style=font-size: 1.4rem; padding: 0;

This works for me with "message-search-from=Kimden" in a DEBUG=1 profile run in Firefox nightly.  It might need a little more tweaking on a real device.
===

Comment 6

[Francesco Lodolo [:flod]]

Closing meta since all dependencies are fixed.

Comment 7

[Delphine Lebédel [:delphine - Use needinfo]]

Verified fixed, marking as so