1029823 - "Your call has ended" message (after Loop call is over) triggers a useless scrollbar, indicating that the message area is a bit too wide

Status: RESOLVED WORKSFORME

(Hello (Loop) :: Client, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Start a Loop call.

(Click the phone icon, type a name for the call, copypaste the resulting URL into a different browser instance, and click "Start the call", and then click "Accept" in the original browser instance)

 2. Click "Stop" in either of the ends of the call.

 3. On the original browser instance, inspect the popup-style UI for the call. (which should now say "Your call has ended."

ACTUAL RESULTS: There's a horizontal scrollbar at the bottom of the popup, with only a few px of scrollable overflow. (and nothing meaningful scrolled out of view)

EXPECTED RESULTS: No useless scrollbar.


NOTE: The scrollbar goes away if I click the "X" next to the "Your call has ended." message, to dismiss it, then the scrollbar goes away.  (If I ended the call from the other browser-instance, then there will also be a second message that I have to dismiss -- "Your peer ended the conversation." Once all messages are dismissed, the scrollbar goes away.)

So I think there's a bug with the message-display, due to a margin or some whitespace or something that barely overflows the region that we're trying to occupy.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Comment 2

[Daniel Holbert [:dholbert]]

Version info:
 33.0a1 (2014-06-24)
 Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0
 Ubuntu 14.04

Comment 3

[Daniel Holbert [:dholbert]]

I can reproduce this on the other end of the call, too (the end where I paste in the URL), by shrinking the window-width.

Comment 4

[Daniel Holbert [:dholbert]]

In responsive design view, with a 320px-wide viewport, we have:
<div class="alert alert-warning">
  <button class="close"></button>
  <p class="message">Your call has ended.</p>
</div>

The <div> there has an outer width of 320px. (290 + 14px of padding on each side + 1px of border on each side)  So the <div> is fine.

The problem is the <button> and the <p>.
 - The <button> has a width of 23px + 6px of padding on each side = 35px
 - The <p> has a width of 290px. (no padding or border)

So together, they have a width of 325px, which is too wide.


A bit more info:
The <button> is floated right, and has an additional "right: -1em", which seems to be the thing responsible for pushing it a bit offscreen.

Comment 5

[Dan Mosedale (:dmosedale, :dmose)]

Thanks for the detailed bug report!  I've tagged this so we'll have a look at it when we're picking bugs for our next spring.

Comment 6

[Mark Banner (:standard8)]

This should have been fixed by other bugs, hence I'm marking as works for me. If it isn't fixed on the latest nightly builds, please let us know and re-open.

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: Screenshot of synthetic popup's title-bar, after the original bug here has been fixed: "Your conver...has ended"

Yup, this looks better now -- looks like the UI has been redesigned a bit, and there's no more "Your call has ended" notification.

One nit with the new UI -- it looks like the message has migrated to the synthetic-popup's "title bar" (and it's gotten a bit longer, with s/call/conversation/), and it ends up being too wide to fit there, so it ends up saying "Your conver...has ended", with an ellipsis, as shown in attached screenshot.

This doesn't look too broken (the meaning is clear, and the ellipsis shows that we're being responsive to sizes), so I'm not filing another bug for it at this point (plus I'm not sure if there's a good way to fix it).  Just mentioning it here w/ a screenshot in case it's unexpected.