Narrow screen widths on the link-clicker UI have a strange layout of text-chat (blank spaces)

RESOLVED FIXED in Firefox 45

Status

Hello (Loop)
Client
P2
normal
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: standard8, Assigned: standard8)

Tracking

({regression})

unspecified
mozilla45
regression
Points:
---

Firefox Tracking Flags

(firefox45 fixed)

Details

(Whiteboard: [visual regression])

Attachments

(2 attachments)

(Assignee)

Description

2 years ago
Created attachment 8690799 [details]
Screen shot of regression

Following bug 1205684, there's strange layouts of text-chat for screen widths < 640px. The text chat gets postboxed, and hence there's blank space that isn't being used.
(Assignee)

Comment 1

2 years ago
Created attachment 8690801 [details] [diff] [review]
Tidy loop conversation window styles, remove temporarily work arounds that are no longer required and fix layout of standalone UI when in narrow views.

This fixes the issue, and does some tidy up - I meant to do the tidy up soon after the media layout changes and forgot :-( That in part lead to the regression.

I'll comment on specific bits in a minute once its up.
Attachment #8690801 - Flags: review?(mdeboer)
(Assignee)

Comment 2

2 years ago
Comment on attachment 8690801 [details] [diff] [review]
Tidy loop conversation window styles, remove temporarily work arounds that are no longer required and fix layout of standalone UI when in narrow views.

Review of attachment 8690801 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/components/loop/content/shared/css/conversation.css
@@ -702,5 @@
>    height: calc(100% - 300px);
>  }
>  
> -.desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
> -  height: calc(100% - 150px);

This is a duplicate of a rule higher up in the file. It was needed at one time because of various specificity rules.

@@ -707,5 @@
> -}
> -
> -/* Temporarily slaved from .media-wrapper until we use it in more places
> -   to avoid affecting the conversation window on desktop. */
> -.media-wrapper > .text-chat-view > .text-chat-entries {

These have been moved down to be with the text chat items, now we don't need to worry about non-media layouts.

@@ -791,5 @@
>    }
>  
> -
> -  .standalone-room-wrapper > .media-layout > .media-wrapper > .local {
> -    /* Add 10px for the margin on standalone */

This was just old and no longer necessary - we no longer have a 10px margin either side of the standalone.

@@ -811,5 @@
>    .media-wrapper > .text-chat-view,
>    .media-wrapper.showing-local-streams > .text-chat-view,
>    .media-wrapper.showing-local-streams.receiving-screen-share > .text-chat-view {
>      /* The remaining 30% that the .focus-stream doesn't use. */
> -    height: 30%;

This is the fix for the standalone on narrow-displays.

@@ -1178,5 @@
>  }
>  
> -@media screen and (max-width:640px) {
> -  /* Rooms specific responsive styling */
> -  .standalone .room-conversation-wrapper .room-inner-info-area {

The items in this rule were basically obsolete, apart from the width.

@@ -1184,5 @@
> -    margin: auto;
> -    width: 100%;
> -    left: 0;
> -  }
> -  .standalone .room-conversation-wrapper .video-layout-wrapper {

The rest of the rules in this section are just obsolete.
Comment on attachment 8690801 [details] [diff] [review]
Tidy loop conversation window styles, remove temporarily work arounds that are no longer required and fix layout of standalone UI when in narrow views.

Review of attachment 8690801 [details] [diff] [review]:
-----------------------------------------------------------------

I appreciate the cleanup and accompanying them with your comments! Confirmed that this fixes the issue and doesn't look like it's regressing other areas.
Attachment #8690801 - Flags: review?(mdeboer) → review+

Comment 5

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/29f87d064607
Status: NEW → RESOLVED
Last Resolved: 2 years ago
status-firefox45: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla45
You need to log in before you can comment on or make changes to this bug.