1228728 - buttons misarranged and tooltips behind buttons in conversation tab, settings button right of share buttons

Status: VERIFIED FIXED

(Hello (Loop) :: Client, defect, P2)

Description

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Attachment: screenshot of issue

Firefox Nightly 45.0a1 and Aurora 44.0a2, both 20151127 on Windows 8.1 64 bit, device pixel ratio is 1.25

If one starts a new conversation, the buttons in the conversations tab are misarranged and the tooltips for the share buttons partially covered by the other buttons like Settings.

Comment 1

[:shell escalante]

investigate to find out what's going on and if pixel ratio is abnormal or if common issue.

Comment 2

[Mark Banner (:standard8)]

This seems to affect Windows where the size of all items is set to "Medium" in the control panel under the display.

Seems to only affect the "Medium" display, Normal & Large are unaffected.

Comment 3

[David Critchley (:dcritch)]

Appears to be a css issue (Only in Windows? I didn't see this issue on Mac) where the height for the .focus-stream is being set to 55% in conversation.css, around line 706 under "@media screen and (max-width:640px) {":

  .media-wrapper > .focus-stream {
    width: 100%;
    /* A reasonable height */
    height: 55%;
  }

Comment 4

[Mark Banner (:standard8)]

I don't think (In reply to David Critchley (:dcritch) from comment #3)
> Appears to be a css issue (Only in Windows? I didn't see this issue on Mac)
> where the height for the .focus-stream is being set to 55% in
> conversation.css, around line 706 under "@media screen and (max-width:640px)
> {":

That shouldn't be active, as @media screen and (max-width:350px) should be overriding it.

However, I've just taken a look on Windows (as I assume you haven't got it at the moment) and found the issue. For some reason, although we're specifying the width as 350px, it looks like its actually being calculated as 350.4px, hence our detection code is failing and we're falling back to our slightly larger than conversation window width code, which is kicking in that 55% and a few other things.

I have a simple fix for this coming up, so I hope you don't mind me stealing it from you.

Comment 5

[GitHub Autolander Bot]

Attachment: [loop] Standard8:bug-1228728-css > mozilla:master

Comment 6

[Mark Banner (:standard8)]

https://github.com/mozilla/loop/commit/6efd6737943ecc9d470b5299fd44d55a914a6e55

Comment 7

[Camelia Badau [:cbadau], Desktop QA]

I've reproduced the initial issue on Windows 7 x64, Windows 8.1 x64 and Windows 10 (Surface Pro) using Nightly 28-11-2015. Please note that this issue is reproducible only with size set to "Medium" in the control panel under the display or with "layout.css.devPixelsPerPx" pref changed to 1.25.  


Verified fixed on Windows 7 x64, Windows 8.1 x64 and Windows 10 (Surface Pro) using latest Nightly 46.0a1 (buildID: 20160119030232). I've set the size to "Medium" in the control panel and I've changed the "layout.css.devPixelsPerPx" pref to 1.25, but the issue has no longer reproduced.