Victor Carciu Reporter
	Description • 9 years ago

Prerequisites:
Android device(Nexus 5, Android 5.1), Release firefox installed

Steps to reproduce:
1.Open Mp Stage on your device and observe homepage

Expected results:
Page title fits in the screen

Actual results:
Page title larger than screen width
 
Please see screencast for this bug: http://screencast.com/t/akePSvG0e7p

NOTES:
The title can be seen with horizontal scroll

	Andy McKay
	Comment 1 • 9 years ago

There's a few basic approaches to fix this. Muffinresearch which one would you recommend to someone who would take this on as a good first bug, shrink the text when it overflows? Any examples of us doing that you could think of?

	scolville@mozilla.com
	Comment 2 • 9 years ago

One of the easiest solutions is adding a horizontal ellipsis via CSS. (See demo [1]). But a downside of this can be the meaning of text content can be lost. We have code for this already [2]

2nd option would be to reduce the size of the text for the small viewport (possibly in conjunction with the ellipsis overflow solution). (This is probably the best blend of simplicity and practicality) 

Lastly another solution is to reduce the text-size dynamically, but this requires js (though we have already helper for this [3]). Additionally it can lead to in-consistency because the size of the heading will be different based on the length of the word.


[1] http://jsbin.com/vugunu/edit?html,css,output
[2] https://github.com/mozilla/olympia/blob/d8aef0b88a5fd20d4413a37807e9ae79c7602fa8/static/css/impala/lib.less#L135
[3] https://github.com/mozilla/olympia/blob/d8aef0b88a5fd20d4413a37807e9ae79c7602fa8/static/js/zamboni/truncation.js#L42

	Trishul Assignee
	Comment 3 • 8 years ago

Following is the fix with first solution
https://github.com/mozilla/olympia/pull/1151

I had to fix the width to use text-overflow.
Kindly review.

	scolville@mozilla.com
	Comment 4 • 8 years ago

Thanks for the patch - there's some review comments on the PR.

	Trishul Assignee
	Comment 5 • 8 years ago

PR comment updated

	scolville@mozilla.com
	Comment 6 • 8 years ago

https://github.com/mozilla/addons-server/commit/a61be13bfbefa8cc152e7f42db72f1d7f1b062cb