Don't use the bootstrap responsive grid for chats in overlay mode

css/converse.css

@@ -4451,17 +4451,17 @@ body.reset {
 #conversejs {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
-  bottom: 0;
-  height: auto;
-  width: 100vw;
   color: #777;
-  direction: ltr;
-  display: block;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
+  direction: ltr;
+  display: block;
+  z-index: 1031; }
+  #conversejs .converse-chatboxes {
     position: fixed;
-  z-index: 1031;
-  margin-left: -15px; }
+    bottom: 0;
+    height: auto;
+    width: 100vw; }
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
     color: #A8ABA1; }
@@ -4875,7 +4875,7 @@ body.reset {
   border-radius: 25%;
   border: none;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 16px;
   margin: 0 0.2em;
   padding: 0.3em;
   text-decoration: none; }
@@ -5358,28 +5358,12 @@ body.reset {
       border-top-right-radius: 0; } }
 #converse-embedded-chat .chatbox,
 #conversejs:not(.fullscreen) .chatbox {
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-  flex: 0 0 100%;
-  max-width: 100%; }
-  @media (min-width: 576px) {
-    #converse-embedded-chat .chatbox,
-    #conversejs:not(.fullscreen) .chatbox {
-      flex: 0 0 33.3333333333%;
-      max-width: 33.3333333333%; } }
-  @media (min-width: 768px) {
-    #converse-embedded-chat .chatbox,
-    #conversejs:not(.fullscreen) .chatbox {
-      flex: 0 0 25%;
-      max-width: 25%; } }
-  @media (min-width: 992px) {
-    #converse-embedded-chat .chatbox,
-    #conversejs:not(.fullscreen) .chatbox {
-      flex: 0 0 16.6666666667%;
-      max-width: 16.6666666667%; } }
+  min-width: 250px !important;
+  width: 250px; }
+  #converse-embedded-chat .chatbox .box-flyout,
+  #conversejs:not(.fullscreen) .chatbox .box-flyout {
+    min-width: 250px !important;
+    width: 250px; }
   #converse-embedded-chat .chatbox .chat-body .chat-message,
   #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
     padding: 0.3em;
@@ -5737,29 +5721,11 @@ body.reset {
     display: block; } }
 #conversejs:not(.fullscreen) #controlbox {
   order: -1;
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-  flex: 0 0 100%;
-  max-width: 100%; }
-  @media (min-width: 576px) {
-    #conversejs:not(.fullscreen) #controlbox {
-      flex: 0 0 33.3333333333%;
-      max-width: 33.3333333333%; } }
-  @media (min-width: 768px) {
-    #conversejs:not(.fullscreen) #controlbox {
-      flex: 0 0 25%;
-      max-width: 25%; } }
-  @media (min-width: 992px) {
-    #conversejs:not(.fullscreen) #controlbox {
-      flex: 0 0 16.6666666667%;
-      max-width: 16.6666666667%; } }
-  @media (min-width: 1200px) {
-    #conversejs:not(.fullscreen) #controlbox {
-      flex: 0 0 16.6666666667%;
-      max-width: 16.6666666667%; } }
+  min-width: 250px !important;
+  width: 250px; }
+  #conversejs:not(.fullscreen) #controlbox .box-flyout {
+    min-width: 250px !important;
+    width: 250px; }
   #conversejs:not(.fullscreen) #controlbox .controlbox-head {
     display: flex;
     flex-direction: row;
@@ -5970,7 +5936,7 @@ body.reset {
       margin: 0.3em 0; }
 #converse-embedded-chat .chatroom,
 #conversejs .chatroom {
-  width: 300px; }
+  width: 400px; }
   @media screen and (max-height: 450px) {
     #converse-embedded-chat .chatroom,
     #conversejs .chatroom {
@@ -6044,7 +6010,7 @@ body.reset {
         display: flex;
         flex-direction: column;
         word-wrap: break-word;
-        min-width: 200px; }
+        min-width: 250px; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
           background-color: #E77051;
@@ -6206,20 +6172,13 @@ body.reset {
     border: 1px solid #999; }
 
 #conversejs .chatbox.chatroom {
-  flex: 0 0 100%;
-  max-width: 100%; }
-  @media (min-width: 576px) {
-    #conversejs .chatbox.chatroom {
-      flex: 0 0 66.6666666667%;
-      max-width: 66.6666666667%; } }
-  @media (min-width: 768px) {
-    #conversejs .chatbox.chatroom {
-      flex: 0 0 50%;
-      max-width: 50%; } }
-  @media (min-width: 992px) {
-    #conversejs .chatbox.chatroom {
-      flex: 0 0 33.3333333333%;
-      max-width: 33.3333333333%; } }
+  min-width: 400px !important;
+  width: 400px; }
+  #conversejs .chatbox.chatroom .box-flyout {
+    min-width: 400px !important;
+    width: 400px; }
+  #conversejs .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
+    font-size: 12px; }
 
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
   background-color: #E7A151; }
@@ -6234,27 +6193,13 @@ body.reset {
 
 #conversejs:not(.fullscreen) #minimized-chats {
   order: 100;
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-  flex: 0 0 16.6666666667%;
-  max-width: 16.6666666667%;
+  width: 130px;
   margin-bottom: -1em;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   color: white;
   margin-right: 0.5em;
   padding: 0; }
-  @media (min-width: 576px) {
-    #conversejs:not(.fullscreen) #minimized-chats {
-      flex: 0 0 16.6666666667%;
-      max-width: 16.6666666667%; } }
-  @media (min-width: 992px) {
-    #conversejs:not(.fullscreen) #minimized-chats {
-      flex: 0 0 8.3333333333%;
-      max-width: 8.3333333333%; } }
   #conversejs:not(.fullscreen) #minimized-chats .badge {
     bottom: 8px;
     border: 1px solid #818479; }
@@ -6286,8 +6231,8 @@ body.reset {
     color: white; }
   #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
     flex-direction: column-reverse;
-    width: 100%;
-    bottom: 48px; }
+    bottom: 34px;
+    width: 130px; }
     #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
       padding: 0.3em;
       border-radius: 4px;

css/inverse.css

@@ -4451,17 +4451,17 @@ body.reset {
 #conversejs {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
-  bottom: 0;
-  height: auto;
-  width: 100vw;
   color: #777;
-  direction: ltr;
-  display: block;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 16px;
+  direction: ltr;
+  display: block;
+  z-index: 1031; }
+  #conversejs .converse-chatboxes {
     position: fixed;
-  z-index: 1031;
-  margin-left: -15px; }
+    bottom: 0;
+    height: auto;
+    width: 100vw; }
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
     color: #A8ABA1; }
@@ -4884,7 +4884,9 @@ body {
         padding-right: 10%;
         font-size: 120%; }
 
-#conversejs.fullscreen form.converse-form {
+#conversejs.fullscreen {
+  margin-left: -15px; }
+  #conversejs.fullscreen form.converse-form {
     margin: 1em; }
     #conversejs.fullscreen form.converse-form input[type=checkbox] {
       margin-left: 1em;
@@ -5805,6 +5807,9 @@ body {
     #conversejs.fullscreen #controlbox {
       flex: 0 0 16.6666666667%;
       max-width: 16.6666666667%; } }
+  #conversejs.fullscreen #controlbox.logged-out {
+    flex: 0 0 100%;
+    max-width: 100%; }
   #conversejs.fullscreen #controlbox .controlbox-pane {
     border-radius: 0; }
   #conversejs.fullscreen #controlbox .flyout {

mockup/chatbox.html

@@ -11,7 +11,7 @@
 <body class="reset">
     <div id="conversejs" class="fullscreen">
         <div class="sidebar"></div>
-        <div class="row no-gutters">
+        <div class="converse-chatboxes row no-gutters">
             <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">

mockup/chatroom.html

@@ -11,7 +11,7 @@
 <body class="reset">
     <div id="conversejs" class="fullscreen">
         <div class="sidebar"></div>
-        <div class="row no-gutters">
+        <div class="converse-chatboxes row no-gutters">
             <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">

mockup/converse.html

@@ -14,7 +14,7 @@
      </div>
 
      <div id="conversejs">
-        <div class="row no-gutters">
+        <div class="converse-chatboxes row no-gutters">
             <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">

mockup/fullscreen-login.html

@@ -15,8 +15,8 @@
     </div>
 
     <div id="conversejs" class="fullscreen">
-        <div class="row no-gutters">
-            <div id="controlbox" class="chatbox">
+        <div class="converse-chatboxes row no-gutters">
+            <div id="controlbox" class="chatbox logged-out">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                         <div class="row">

mockup/overlayed-login.html

@@ -15,7 +15,7 @@
     </div>
 
     <div id="conversejs">
-        <div class="row no-gutters">
+        <div class="converse-chatboxes row no-gutters">
             <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="chat-head controlbox-head">

sass/_core.scss

@@ -42,18 +42,19 @@ body.reset {
 #conversejs {
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
-    bottom: 0;
-    height: auto;
-    width: 100vw;
     color: $text-color;
-    direction: ltr;
-    display: block;
     font-family: "Helvetica", "Arial", sans-serif;
     font-size: $font-size;
-    position: fixed;
+    direction: ltr;
+    display: block;
     z-index: 1031; // One more than bootstrap navbar
 
-    margin-left: -15px; // XXX: why is this necessary?
+    .converse-chatboxes {
+        position: fixed;
+        bottom: 0;
+        height: auto;
+        width: 100vw;
+    }
 
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         color: $subdued-color;

sass/converse/_chatbox.scss

@@ -13,18 +13,12 @@
         }
     }
     .chatbox {
-        @include make-col-ready();
-        @include media-breakpoint-up(xs) {
-            @include make-col(12);
-        }
-        @include media-breakpoint-up(sm) {
-            @include make-col(4);
-        }
-        @include media-breakpoint-up(md) {
-            @include make-col(3);
-        }
-        @include media-breakpoint-up(lg) {
-            @include make-col(2);
+        min-width: $chat-width!important;
+        width: $chat-width;
+
+        .box-flyout {
+            min-width: $chat-width!important;
+            width: $chat-width;
         }
 
         .chat-body {

sass/converse/_chatrooms.scss

 #conversejs {
     .chatbox {
         &.chatroom {
-            @include media-breakpoint-up(xs) {
-                @include make-col(12);
+            min-width: $chatroom-width !important;
+            width: $chatroom-width;
+            .box-flyout {
+                min-width: $chatroom-width !important;
+                width: $chatroom-width;
+            }
+
+            .chatroom-body {
+                .occupants {
+                    .chatroom-features {
+                        .feature {
+                            font-size: $font-size-small;
                         }
-            @include media-breakpoint-up(sm) {
-                @include make-col(8);
                     }
-            @include media-breakpoint-up(md) {
-                @include make-col(6);
                 }
-            @include media-breakpoint-up(lg) {
-                @include make-col(4);
             }
         }
     }

sass/converse/_controlbox.scss

 #conversejs:not(.fullscreen) {
     #controlbox {
         order: -1;
-        @include make-col-ready();
-        @include media-breakpoint-up(xs) {
-            @include make-col(12);
-        }
-        @include media-breakpoint-up(sm) {
-            @include make-col(4);
-        }
-        @include media-breakpoint-up(md) {
-            @include make-col(3);
+        min-width: $controlbox-width !important;
+        width: $controlbox-width;
+        .box-flyout {
+            min-width: $controlbox-width !important;
+            width: $controlbox-width;
         }
-        @include media-breakpoint-up(lg) {
-            @include make-col(2);
-        }
-        @include media-breakpoint-up(xl) {
-            @include make-col(2);
-        }
-
         .controlbox-head {
             display: flex;
             flex-direction: row;

sass/converse/_minimized_chats.scss

 #conversejs:not(.fullscreen) {
     #minimized-chats {
         order: 100;
-        @include make-col-ready();
-        @include media-breakpoint-up(xs) {
-            @include make-col(2);
-        }
-        @include media-breakpoint-up(sm) {
-            @include make-col(2);
-        }
-        @include media-breakpoint-up(lg) {
-            @include make-col(1);
-        }
 
+        width: $minimized-chats-width;
         margin-bottom: -2*$chat-gutter;
         border-top-left-radius: $chatbox-border-radius;
         border-top-right-radius: $chatbox-border-radius;
@@ -59,8 +50,8 @@
 
         .minimized-chats-flyout {
             flex-direction: column-reverse;
-            width: 100%;
-            bottom: 48px;
+            bottom: 34px;
+            width: $minimized-chats-width;
 
             .chat-head {
                 padding: 0.3em;

sass/converse/_variables.scss

@@ -109,8 +109,8 @@ $line-height-small:  14px !default;
 $line-height:  16px !default;
 $line-height-large:  20px !default;
 
-$controlbox-width: 200px !default;
-$chat-width: 200px !default;
+$controlbox-width: 250px !default;
+$chat-width: 250px !default;
 $chat-height: 450px !default;
 $chat-gutter: 0.5em !default;
 $minimized-chats-width: 130px !default;
@@ -121,7 +121,7 @@ $small-mobile-chat-height: 300px !default;
 
 $font-path: "../fonticons/fonts/" !default;
 
-$chatroom-width: 300px !default;
+$chatroom-width: 400px !default;
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-lightest: $light-red !default;
@@ -135,4 +135,4 @@ $box-close-button-padding-top: 4px !default;
 $box-close-button-padding-bottom: 4px !default;
 $box-close-button-padding-left: 4px !default;
 $box-close-button-padding-right: 4px !default;
-$box-close-font-size: 12px !default;
+$box-close-font-size: 16px !default;

sass/inverse/_controlbox.scss

@@ -8,6 +8,10 @@
             @include make-col(2);
         }
 
+        &.logged-out {
+            @include make-col(12);
+        }
+
         margin: 0;
 
         .controlbox-pane {

sass/inverse/_core.scss

@@ -36,6 +36,9 @@ body {
 
 #conversejs.fullscreen {
 
+    // XXX: why is this neccessary?
+    margin-left: -15px;
+
     form {
         &.converse-form {
             margin: 1em;

src/converse-controlbox.js

@@ -305,8 +305,6 @@
 
                 renderLoginPanel () {
                     this.el.classList.add("logged-out");
-                    this.el.classList.remove("col-xl-2");
-                    this.el.classList.remove("col-md-3");
                     if (_.isNil(this.loginpanel)) {
                         this.loginpanel = new _converse.LoginPanel({
                             'model': new _converse.LoginPanelModel()
@@ -332,9 +330,6 @@
                         delete this.loginpanel;
                     }
                     this.el.classList.remove("logged-out");
-                    this.el.classList.add("col-xl-2");
-                    this.el.classList.add("col-md-3");
-
                     this.controlbox_pane = new _converse.ControlBoxPane();
                     this.el.querySelector('.controlbox-panes').insertAdjacentElement(
                         'afterBegin',

src/templates/chatboxes.html

-<div class="row no-gutters"></div>
+<div class="converse-chatboxes row no-gutters"></div>
 <div id="converse-modals" class="modals"></div>

src/templates/chatroom_features.html

@@ -24,7 +24,7 @@
 <li class="feature" title="{{{ o.tt_persistent }}}"><span class="fa fa-save"></span>{{{ o.label_persistent }}}</li>
 {[ } ]}
 {[ if (o.temporary) { ]}
-<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake"></span>{{{ o.label_temporary }}}</li>
+<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake-o"></span>{{{ o.label_temporary }}}</li>
 {[ } ]}
 {[ if (o.nonanonymous) { ]}
 <li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="fa fa-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>