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

RESOLVED WORKSFORME

Status

Hello (Loop)
Client
RESOLVED WORKSFORME
4 years ago
3 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [well filed])

Attachments

(2 attachments)

(Reporter)

Description

4 years ago
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.
(Reporter)

Comment 1

4 years ago
Created attachment 8445477 [details]
screenshot
(Reporter)

Comment 2

4 years ago
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
Summary: "Your call has ended" page (after Loop conversation) has a scrollbar, indicating that it's a bit too wide → "Your call has ended" message (after Loop call is over) triggers a useless scrollbar, indicating that the message area is a bit too wide
(Reporter)

Comment 3

4 years ago
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.
(Reporter)

Comment 4

4 years ago
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.
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.
Whiteboard: [contributor visibility]

Updated

4 years ago
Whiteboard: [contributor visibility] → [well filed]
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.
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → WORKSFORME
(Reporter)

Comment 7

3 years ago
Created attachment 8501829 [details]
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.
(Reporter)

Updated

3 years ago
Attachment #8501829 - Attachment description: Screenshot of title: "Your conver...has ended" → Screenshot of synthetic popup's title-bar, after the original bug here has been fixed: "Your conver...has ended"
You need to log in before you can comment on or make changes to this bug.