986506 - [system] Offline warning when downloading updates looks broken with longer text

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::System, defect)

Description

[Francesco Lodolo [:flod]]

Attachment: Current status

Noticed by chance today (forgot to enable Wi-Fi): one update available, but no network.

Image has Italian on the left, English on the right.

Dialog is not completely broken, since I can scroll and display the missing text, but considered the amount of space available the UI just looks broken, and I'm not sure I expect users to try scroll.

Comment 1

[Francesco Lodolo [:flod]]

Attachment: Possible fix

Unfortunately I can't try a patch directly on my Keon (bug 985975), so I'm stuck with Developer Tools on an older build.

Current: line-height is huge (3rem), section has a fixed height of 6rem

This screenshot is made by removing height (replaced by max-height), increasing vertical padding from 0.5rem to 1rem, and reducing line-height to 2.2rem

#updates-download-dialog p {
 padding: 1rem 1.8rem;
 line-height: 2.2rem;
 max-height: 6.6rem;
}

Would it be acceptable?

Comment 2

[Francesco Lodolo [:flod]]

Attachment: Pull request on Github

Comment 3

[Francesco Lodolo [:flod]]

Comment on attachment 8395568 [details] [review]
Pull request on Github

Since it's been almost two months and I couldn't get any feedback from UX, trying to get a review.

Comment 4

[Stephany Wilkes]

Flagging Omega on ui-review? but also setting a ni? for Eric Pang, as I'm not sure this is really in Omega's wheelhouse.

Comment 5

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 8395568 [details] [review]
Pull request on Github

This is trivial enough for not needing a UX review, IMHO.

However the asymmetrical position of the button below is UGLY we should fix it in another bug.

Comment 6

[Ryan VanderMeulen [:RyanVM]]

Master: https://github.com/mozilla-b2g/gaia/commit/0632b78d3f532bb48838e8bd080dc4787c896df8

Comment 7

[Francesco Lodolo [:flod]]

Finally manage to verify this on Flame.