1420884 - Long wrapping labels cause changing corresponding button height

Status: RESOLVED FIXED

(Firefox :: Settings UI, defect, P4)

Description

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

Attachment: screenshot

STR:
1. With Nightly, open about:preferences > Privacy & Security.
2. Open DevTools or any sidebar or just resize the window to cause long labels to wrap to second line.
3. When the place for content is too narrow and lines start to wrap, the corresponding buttons on the same lines are stretched in their height.

Personally I have noticed this in Czech (cs) Nightly with "Autofill credit cards" and "Learn more" on the same line.

Mozilla/5.0 (X11; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0 ID:20171126220311

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Ricky, can you take this? We should be using -moz-box-align: start to fix this I believe.

Comment 2

[Ricky Chien [:rickychien] (inactive)]

I've tried `-moz-box-align: start` approach in devtools and it works as expected. 
 
Evan, since my hands are full now, do you have time to take this?

Comment 3

[Evan Tseng [:evanxd]]

Sure, I could help this.

Comment 4

[Evan Tseng [:evanxd]]

Attachment: Bug 1420884 - Make savedAddressesBtnWrapper and savedCreditCardsBtnWrapper align start to keep the buttons as same size when the sibling description elements' height is changed by longer l10n strings.

Review commit: https://reviewboard.mozilla.org/r/206618/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/206618/

Comment 5

[Evan Tseng [:evanxd]]

Hi Scott,

Could you help review the patch?

Thank you very much.

Comment 6

[Scott Wu [:scottwu]]

Comment on attachment 8935720 [details]
Bug 1420884 - Make savedAddressesBtnWrapper and savedCreditCardsBtnWrapper align start to keep the buttons as same size when the sibling description elements' height is changed by longer l10n strings.

https://reviewboard.mozilla.org/r/206618/#review214370

Looks great. Thanks for fixing this! Passing this to Ray as I don't have L3 status.

Comment 7

[Ray Lin[:ralin]]

Comment on attachment 8935720 [details]
Bug 1420884 - Make savedAddressesBtnWrapper and savedCreditCardsBtnWrapper align start to keep the buttons as same size when the sibling description elements' height is changed by longer l10n strings.

https://reviewboard.mozilla.org/r/206618/#review214394

Comment 8

[Evan Tseng [:evanxd]]

Thanks for reviewing, Scott and Ray.

And the try looks good. Let's land the patch.

[1]: https://treeherder.mozilla.org/#/jobs?repo=try&revision=71166a8df9fc

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/15d8b89eb665
Make savedAddressesBtnWrapper and savedCreditCardsBtnWrapper align start to keep the buttons as same size when the sibling description elements' height is changed by longer l10n strings. r=ralin

Comment 10

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/15d8b89eb665

Comment 11

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

I can confirm it's fixed in Mozilla/5.0 (X11; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0 ID:20171220220602. Good job!