Page MenuHomePhabricator

Avoidable line break in the "All notifications" link in the footer
Closed, ResolvedPublic

Description

Author: mr.heat

Description:
Line break in German "All notifications"

The Echo overlay contains a footer with two links: "All notifications" and "Preferences". In German these links are a little bit longer: "Alle Benachrichtigungen" and "Einstellungen". Since the footer uses fixed pixel widths there is an unnecessary line break (see the screenshot).

The solution is very simple. Simply remove these two fixed widths and let the browser decide how to split the little table (it uses "display: table;" and therefor is a table) in the footer.

#mw-echo-overlay-footer {

width: 100%;  /* add this */

}
#mw-echo-overlay-link {

width: 149px; /* remove this */

}
#mw-echo-overlay-pref-link {

width: 174px; /* remove this */

}


Version: master
Severity: minor

Attached:

Echo_Footer_Table_German.png (157×504 px, 10 KB)

Details

Reference
bz57327

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 2:29 AM
bzimport set Reference to bz57327.
bzimport added a subscriber: Unknown Object (MLST).

Agreed.
I tested that code in Enwiki, and the result looks fine to me. It won't be centred anymore, but that's a reasonable compromise in order to make it look much better in any language that would otherwise (currently) line-wrap.

Created attachment 15489
German Wikipedia in Firefox (Ubuntu)

Still a problem for several reasons:

  1. The text wraps in certain languages. This is simply not necessary. There is enough space.
  2. Please note the gray border in the upper right. A part of it is missing.
  3. We can't know how long the two messages are in all languages. In some languages the first message may be longer, in other languages the second. Fixed pixel withs are just wrong for elements with variable-length content.
  4. The limitation to fixed pixel widths make it hard to apply user defined styles like .mw-echo-overlay { width: 80ex; }. The issues described above become worse.
  5. The two elements are rendered as table cells anyway. Let the browser do it's job, please.

Attached:

Screenshot_from_2014-05-27_16:07:09.png (133×521 px, 9 KB)

Change 135590 had a related patch set uploaded by Thiemo Mättig (WMDE):
Avoid line break in the "All notifications" footer link

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

Change 135590 merged by jenkins-bot:
Avoid line break in the "All notifications" footer link

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