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;
-  position: fixed;
-  z-index: 1031;
-  margin-left: -15px; }
+  direction: ltr;
+  display: block;
+  z-index: 1031; }
+  #conversejs .converse-chatboxes {
+    position: fixed;
+    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;
-  position: fixed;
-  z-index: 1031;
-  margin-left: -15px; }
+  direction: ltr;
+  display: block;
+  z-index: 1031; }
+  #conversejs .converse-chatboxes {
+    position: fixed;
+    bottom: 0;
+    height: auto;
+    width: 100vw; }
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
     color: #A8ABA1; }
@@ -4884,17 +4884,19 @@ body {
         padding-right: 10%;
         font-size: 120%; }
 
-#conversejs.fullscreen form.converse-form {
-  margin: 1em; }
-  #conversejs.fullscreen form.converse-form input[type=checkbox] {
-    margin-left: 1em;
-    display: inline;
-    margin-bottom: 2em; }
-  #conversejs.fullscreen form.converse-form input[type=button],
-  #conversejs.fullscreen form.converse-form input[type=submit] {
-    padding-left: 1em;
-    padding-right: 1em;
-    margin-right: 1em; }
+#conversejs.fullscreen {
+  margin-left: -15px; }
+  #conversejs.fullscreen form.converse-form {
+    margin: 1em; }
+    #conversejs.fullscreen form.converse-form input[type=checkbox] {
+      margin-left: 1em;
+      display: inline;
+      margin-bottom: 2em; }
+    #conversejs.fullscreen form.converse-form input[type=button],
+    #conversejs.fullscreen form.converse-form input[type=submit] {
+      padding-left: 1em;
+      padding-right: 1em;
+      margin-right: 1em; }
 
 #conversejs #user-profile-modal label {
   font-weight: bold; }
@@ -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

@@ -1,17 +1,21 @@
 #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;
             }
-            @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);
+
+            .chatroom-body {
+                .occupants {
+                    .chatroom-features {
+                        .feature {
+                            font-size: $font-size-small;
+                        }
+                    }
+                }
             }
         }
     }

sass/converse/_controlbox.scss

@@ -1,23 +1,12 @@
 #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

@@ -1,17 +1,8 @@
 #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/converse-dragresize.js

@@ -67,10 +67,16 @@
                             that.resizing.chatbox.height,
                             that.resizing.chatbox.model.get('default_height')
                     );
+                    const width = that.applyDragResistance(
+                            that.resizing.chatbox.width,
+                            that.resizing.chatbox.model.get('default_width')
+                    );
                     if (that.connection.connected) {
                         that.resizing.chatbox.model.save({'height': height});
+                        that.resizing.chatbox.model.save({'width': width});
                     } else {
                         that.resizing.chatbox.model.set({'height': height});
+                        that.resizing.chatbox.model.set({'width': width});
                     }
                     that.resizing = null;
                 });
@@ -82,9 +88,12 @@
                 initialize () {
                     const { _converse } = this.__super__;
                     const result = this.__super__.initialize.apply(this, arguments),
-                        height = this.get('height'),
+                        height = this.get('height'), width = this.get('width'),
                         save = this.get('id') === 'controlbox' ? this.set.bind(this) : this.save.bind(this);
-                    save('height', _converse.applyDragResistance(height, this.get('default_height')));
+                    save({
+                        'height': _converse.applyDragResistance(height, this.get('default_height')),
+                        'width': _converse.applyDragResistance(width, this.get('default_width')),
+                    });
                     return result;
                 }
             },
@@ -92,6 +101,8 @@
             ChatBoxView: {
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
+                    'mousedown .dragresize-left': 'onStartHorizontalResize',
+                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -102,9 +113,18 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
+                    this.setWidth();
                     return result;
                 },
 
+                setWidth () {
+                    // If a custom width is applied (due to drag-resizing),
+                    // then we need to set the width of the .chatbox element as well.
+                    if (this.model.get('width')) {
+                        this.el.style.width = this.model.get('width');
+                    }
+                },
+
                 _show () {
                     this.initDragResize().setDimensions();
                     this.__super__._show.apply(this, arguments);
@@ -119,25 +139,32 @@
                           style = window.getComputedStyle(flyout);
 
                     if (_.isUndefined(this.model.get('height'))) {
-                        const height = parseInt(style.height.replace(/px$/, ''), 10);
+                        const height = parseInt(style.height.replace(/px$/, ''), 10),
+                              width = parseInt(style.width.replace(/px$/, ''), 10);
                         this.model.set('height', height);
                         this.model.set('default_height', height);
+                        this.model.set('width', width);
+                        this.model.set('default_width', width);
                     }
+                    const min_width = style['min-width'];
                     const min_height = style['min-height'];
+                    this.model.set('min_width', min_width.endsWith('px') ? Number(min_width.replace(/px$/, '')) :0);
                     this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
                     // Initialize last known mouse position
                     this.prev_pageY = 0;
                     this.prev_pageX = 0;
                     if (_converse.connection.connected) {
                         this.height = this.model.get('height');
+                        this.width = this.model.get('width');
                     }
                     return this;
                 },
 
                 setDimensions () {
-                    // Make sure the chat box has the right height
+                    // Make sure the chat box has the right height and width.
                     this.adjustToViewport();
                     this.setChatBoxHeight(this.model.get('height'));
+                    this.setChatBoxWidth(this.model.get('width'));
                 },
 
                 setChatBoxHeight (height) {
@@ -153,10 +180,32 @@
                     }
                 },
 
+                setChatBoxWidth (width) {
+                    const { _converse } = this.__super__;
+                    if (width) {
+                        width = _converse.applyDragResistance(width, this.model.get('default_width'))+'px';
+                    } else {
+                        width = "";
+                    }
+                    this.el.style.width = width;
+                    const flyout_el = this.el.querySelector('.box-flyout');
+                    if (!_.isNull(flyout_el)) {
+                        flyout_el.style.width = width;
+                    }
+                },
+
                 adjustToViewport () {
-                    /* Event handler called when viewport gets resized. We remove the custom height from chat boxes. */
+                    /* Event handler called when viewport gets resized. We remove
+                     * custom width/height from chat boxes.
+                     */
+                    const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                     const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-                    if (viewport_height <= this.model.get('height')) {
+                    if (viewport_width <= 480) {
+                        this.model.set('height', undefined);
+                        this.model.set('width', undefined);
+                    } else if (viewport_width <= this.model.get('width')) {
+                        this.model.set('width', undefined);
+                    } else if (viewport_height <= this.model.get('height')) {
                         this.model.set('height', undefined);
                     }
                 },
@@ -175,6 +224,26 @@
                     this.prev_pageY = ev.pageY;
                 },
 
+                onStartHorizontalResize (ev) {
+                    const { _converse } = this.__super__;
+                    if (!_converse.allow_dragresize) { return true; }
+                    const flyout = this.el.querySelector('.box-flyout'),
+                          style = window.getComputedStyle(flyout);
+                    this.width = parseInt(style.width.replace(/px$/, ''), 10);
+                    _converse.resizing = {
+                        'chatbox': this,
+                        'direction': 'left'
+                    };
+                    this.prev_pageX = ev.pageX;
+                },
+
+                onStartDiagonalResize (ev) {
+                    const { _converse } = this.__super__;
+                    this.onStartHorizontalResize(ev);
+                    this.onStartVerticalResize(ev);
+                    _converse.resizing.direction = 'topleft';
+                },
+
                 resizeChatBox (ev) {
                     let diff;
                     const { _converse } = this.__super__;
@@ -186,12 +255,22 @@
                             this.setChatBoxHeight(this.height);
                         }
                     }
+                    if (_.includes(_converse.resizing.direction, 'left')) {
+                        diff = this.prev_pageX - ev.pageX;
+                        if (diff) {
+                            this.width = ((this.width+diff) > (this.model.get('min_width') || 0)) ? (this.width+diff) : this.model.get('min_width');
+                            this.prev_pageX = ev.pageX;
+                            this.setChatBoxWidth(this.width);
+                        }
+                    }
                 }
             },
 
             HeadlinesBoxView: {
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
+                    'mousedown .dragresize-left': 'onStartHorizontalResize',
+                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -202,6 +281,7 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
+                    this.setWidth();
                     return result;
                 }
             },
@@ -210,6 +290,7 @@
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
                     'mousedown .dragresize-left': 'onStartHorizontalResize',
+                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -220,6 +301,7 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
+                    this.setWidth();
                     return result;
                 },
 
@@ -239,6 +321,8 @@
             ChatRoomView: {
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
+                    'mousedown .dragresize-left': 'onStartHorizontalResize',
+                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -249,6 +333,7 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
+                    this.setWidth();
                     return result;
                 }
             }

src/templates/chatboxes.html

@@ -1,2 +1,2 @@
-<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>