563378 - Button overflows the promo module boundary in French locale

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect)

Description

[krupa raj[:krupa]]

Attachment: button overflow

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

steps to reproduce:
1.Go to https://preview.addons.mozilla.org/fr/firefox/#t-reference
2.Notice the install button for add-on-"Reframe it"

observed behavior:
Button overflows the promo module boundary in French locale

Comment 1

[Potch [:potch]]

Caused by wide localizations and the following CSS rule: 

div.section-teaser .column .button * {
  ...
  white-space:nowrap;
  ...
}

Comment 2

[Justin Scott [:fligtar]]

I'm okay with long text wrapping in the buttons. Just make sure we don't regress bug 555773.

Comment 3

[Potch [:potch]]

Attachment: With the change

this is how the buttons will look in the "bad case", where the text is long, and the browser is resized small enough to crush the featured module

Comment 4

[Potch [:potch]]

Attachment: Current behavior

This is the same bad case with the current style.

Comment 5

[Justin Scott [:fligtar]]

I prefer the wrapped version, though the icon should be vertically aligned in the middle.

Comment 6

[Jeff Balogh (:jbalogh)]

(In reply to comment #3)
> Created an attachment (id=443179) [details]
> With the change

Patch or it didn't happen.

Comment 7

[Potch [:potch]]

Attachment: dropping a white-space:nowrap rule to allow buttons to flow.

still don't have commit.

Comment 8

[Fred Wenzel [:wenzel]]

(In reply to comment #5)
> I prefer the wrapped version, though the icon should be vertically aligned in
> the middle.

+1 for the vertical alignment.

Comment 9

[Jeff Balogh (:jbalogh)]

Fixed in http://github.com/jbalogh/amo2009-css/commit/f8f52070c03, filed bug 563979 for the alignment.

Comment 10

[krupa raj[:krupa]]

the button now wraps in French locale-https://preview.addons.mozilla.org/fr/firefox/#t-reference
.verified