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

VERIFIED FIXED

Status

Firefox OS
Gaia::E-Mail
VERIFIED FIXED
5 years ago
4 years ago

People

(Reporter: delphine, Unassigned)

Tracking

({l12y})

unspecified
ARM
Gonk (Firefox OS)
Dependency tree / graph

Firefox Tracking Flags

(b2g18 affected)

Details

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
Issue repros in Greek, German, Croatian, Hungarian, Dutch, Turkish, Catalan
status-b2g18: --- → affected
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.
===

Updated

5 years ago
Depends on: 905279
Depends on: 946829
No longer depends on: 946829
Duplicate of this bug: 888348
Duplicate of this bug: 946829
Duplicate of this bug: 969049
Closing meta since all dependencies are fixed.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Verified fixed, marking as so
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.