Fix chatbox width for narrower viewports

css/converse.css

@@ -1243,18 +1243,17 @@ body .brand-heading {
 @media screen and (max-width: 767px) {
   #conversejs #login-dialog .pure-form.converse-form {
     padding: 3em 2em 3em; }
-
-  > .chatbox {
+  #conversejs > .chatbox {
     width: calc(100% - 50px); }
-
-  .chatbox .chat-body .chat-message .chat-msg-author {
+  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
     white-space: normal; }
-  .chatbox .box-flyout {
-    left: 50px;
-    bottom: 0;
-    width: calc(100% - 50px);
-    height: 100vh;
-    box-shadow: none; } }
+  #conversejs .chatbox .row {
+    width: calc(100% - 50px); }
+    #conversejs .chatbox .row .box-flyout {
+      left: 50px;
+      bottom: 0;
+      height: 100vh;
+      box-shadow: none; } }
 #converse-embedded-chat .chat-head,
 #conversejs:not(.fullscreen) .chat-head {
   border-top-left-radius: 4px;
@@ -1681,8 +1680,7 @@ body .brand-heading {
     position: absolute;
     top: 0;
     left: 50px;
-    display: none;
-    width: calc(100% - 50px); }
+    display: none; }
     #conversejs #controlbox #users.controlbox-pane {
       height: 100vh; }
   #conversejs.sidebar-open > .chatbox:not(#controlbox) {

css/inverse.css

@@ -1317,18 +1317,17 @@ body {
 @media screen and (max-width: 767px) {
   #conversejs #login-dialog .pure-form.converse-form {
     padding: 3em 2em 3em; }
-
-  > .chatbox {
+  #conversejs > .chatbox {
     width: calc(100% - 50px); }
-
-  .chatbox .chat-body .chat-message .chat-msg-author {
+  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
     white-space: normal; }
-  .chatbox .box-flyout {
-    left: 50px;
-    bottom: 0;
-    width: calc(100% - 50px);
-    height: 100vh;
-    box-shadow: none; } }
+  #conversejs .chatbox .row {
+    width: calc(100% - 50px); }
+    #conversejs .chatbox .row .box-flyout {
+      left: 50px;
+      bottom: 0;
+      height: 100vh;
+      box-shadow: none; } }
 #conversejs.fullscreen .chatbox-btn {
   font-size: 18px;
   margin: 0 0.3em; }
@@ -1377,13 +1376,13 @@ body {
   #conversejs.fullscreen .chatbox .chat-title {
     font-size: 26px;
     line-height: 26px; }
-  #conversejs.fullscreen .chatbox form.sendXMPPMessage ul {
+  #conversejs.fullscreen .chatbox .sendXMPPMessage ul {
     width: 100%; }
-  #conversejs.fullscreen .chatbox form.sendXMPPMessage .toggle-smiley {
+  #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley {
     padding-left: 0.5em; }
-    #conversejs.fullscreen .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
+    #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
       margin-right: 5em; }
-    #conversejs.fullscreen .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
+    #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
       padding-left: 10px;
       padding-right: 10px; }
 
@@ -1773,8 +1772,7 @@ body {
     position: absolute;
     top: 0;
     left: 50px;
-    display: none;
-    width: calc(100% - 50px); }
+    display: none; }
     #conversejs #controlbox #users.controlbox-pane {
       height: 100vh; }
   #conversejs.sidebar-open > .chatbox:not(#controlbox) {

sass/_chatbox.scss

@@ -448,25 +448,27 @@
                 padding: 3em 2em 3em;
             }
         }
-    }
+        > .chatbox {
+            width: calc(100% - 50px);
+        }
+        .chatbox {
+            .chat-body {
+                .chat-message {
+                    .chat-msg-author {
+                        white-space: normal;
+                    }
+                }
+            }
+            .row {
+                width: calc(100% - 50px);
 
-    > .chatbox {
-        width: calc(100% - 50px);
-    }
-    .chatbox {
-        .chat-body {
-            .chat-message {
-                .chat-msg-author {
-                    white-space: normal;
+                .box-flyout {
+                    left: 50px;
+                    bottom: 0;
+                    height: 100vh;
+                    box-shadow: none;
                 }
             }
         }
-        .box-flyout {
-            left: 50px;
-            bottom: 0;
-            width: calc(100% - 50px);
-            height: 100vh;
-            box-shadow: none;
-        }
     }
 }

sass/_controlbox.scss

@@ -532,7 +532,6 @@
                 top: 0;
                 left: 50px;
                 display: none;
-                width: calc(100% - 50px);
 
                 &.controlbox-pane {
                     height: 100vh;

sass/inverse/_chatbox.scss

@@ -64,7 +64,7 @@
             line-height: $font-size-huge;
         }
 
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             ul {
                 width: 100%;
             }