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

Status: RESOLVED FIXED

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

Description

[Mark Banner (:standard8)]

Attachment: 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.

Comment 1

[Mark Banner (:standard8)]

Attachment: 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.

Comment 2

[Mark Banner (:standard8)]

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 3

[Mike de Boer [:mikedeboer]]

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.

Comment 4

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/29f87d064607

Comment 5

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/29f87d064607