From acf14cf8cbaa7dc34952751f8c5bc08b7608223f Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 29 Oct 2019 11:34:22 +0100
Subject: [PATCH] Fixes #1757

- Increase z-index for chatbox flyouts so that they appear above the controlbox
- Also fix a margin offset bug for the controlbox (in smaller viewports)
---
 CHANGES.md            | 1 +
 sass/_chatbox.scss    | 2 +-
 sass/_controlbox.scss | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 777a9e615..b78a9adc9 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,7 @@
 - #1089: When filtering the roster for `online` users, show all non-offline users.
 - #1691: Fix `collection.chatbox is undefined` errors
 - #1733: New message notifications for a minimized chat stack on top of each other
+- #1757: Chats are hidden behind the controlbox on mobile
 - Prevent editing of sent file uploads.
 - Initial support for sending custom emojis. Currently only between Converse
   instances. Still working out a wire protocol for compatibility with other clients.
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index d05d66c1a..b9b9ee612 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -127,7 +127,7 @@
             justify-content: space-between;
             background-color: var(--chat-head-color);
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-            z-index: 1;
+            z-index: 2;
             overflow-y: hidden;
             width: 100%;
 
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index 69c6efc2b..2d6d104fe 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -291,9 +291,9 @@
         }
 
         .controlbox-panes {
+            background-color: var(--controlbox-pane-background-color);
             height: 100%;
             overflow-y: auto;
-            background-color: var(--controlbox-pane-background-color);
         }
 
         .controlbox-subtitle {
@@ -571,8 +571,7 @@
 
             .chatbox {
                 .box-flyout {
-                    margin-left: 15px; // Counteracts Bootstrap margins, but
-                                       // not clear why needed...
+                    margin-left: 15px; // Counteracts Bootstrap margins, but not clear why needed...
                     left: 0;
                     bottom: 0;
                     border-radius: 0;
@@ -586,6 +585,7 @@
                 .box-flyout {
                     width: 100vw !important;
                     height: 100vh !important;
+                    margin-right: -15px;
                 }
                 .sidebar {
                     display: block;