Fixes around resizing of chats.

- The .box-flyout container also needs it's width set upon page load.
- Remove custom height/width upon viewport change (if viewport is small enough).

converse.js

@@ -1222,6 +1222,7 @@
             },
 
             initialize: function () {
+                $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
                 this.model.messages.on('add', this.onMessageAdded, this);
                 this.model.on('show', this.show, this);
                 this.model.on('destroy', this.hide, this);
@@ -1346,6 +1347,22 @@
                 return this;
             },
 
+            adjustToViewport: function () {
+                /* Event handler called when viewport gets resized. We remove
+                 * custom width/height from chat boxes.
+                 */
+                var viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+                var viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+                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);
+                }
+            },
+
             initDragResize: function () {
                 /* Determine and store the default box size.
                  * We need this information for the drag-resizing feature.
@@ -1373,6 +1390,13 @@
                 return this;
             },
 
+            setDimensions: function () {
+                // 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'));
+            },
+
             clearStatusNotification: function () {
                 this.$content.find('div.chat-event').remove();
             },
@@ -1780,14 +1804,22 @@
 
             setChatBoxHeight: function (height) {
                 if (!this.model.get('minimized')) {
+                    if (height) {
                         height = converse.applyDragResistance(height, this.model.get('default_height'))+'px';
+                    } else {
+                        height = "";
+                    }
                     this.$el.children('.box-flyout')[0].style.height = height;
                 }
             },
 
             setChatBoxWidth: function (width) {
                 if (!this.model.get('minimized')) {
+                    if (width) {
                         width = converse.applyDragResistance(width, this.model.get('default_width'))+'px';
+                    } else {
+                        width = "";
+                    }
                     this.$el[0].style.width = width;
                     this.$el.children('.box-flyout')[0].style.width = width;
                 }
@@ -2116,7 +2148,7 @@
                 if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
                     return this.focus();
                 }
-                this.initDragResize();
+                this.initDragResize().setDimensions();
                 this.$el.fadeIn(function () {
                     if (typeof callback === "function") {
                         callback.apply(this, arguments);
@@ -2485,6 +2517,7 @@
 
             initialize: function () {
                 this.$el.insertAfter(converse.controlboxtoggle.$el);
+                $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
                 this.model.on('change:connected', this.onConnected, this);
                 this.model.on('destroy', this.hide, this);
                 this.model.on('hide', this.hide, this);
@@ -2568,7 +2601,7 @@
                 if (converse.allow_registration) {
                     this.registerpanel.render().$el.hide();
                 }
-                this.initDragResize();
+                this.initDragResize().setDimensions();
                 if ($feedback.length && $feedback.text() !== __('Connecting')) {
                     this.$('.conn-feedback').replaceWith($feedback);
                 }
@@ -2595,7 +2628,7 @@
                         this.roomspanel.model.save({nick: Strophe.getNodeFromJid(converse.bare_jid)});
                     }
                 }
-                this.initDragResize();
+                this.initDragResize().setDimensions();
             },
 
             close: function (ev) {
@@ -2845,6 +2878,7 @@
             is_chatroom: true,
 
             initialize: function () {
+                $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
                 this.model.messages.on('add', this.onMessageAdded, this);
                 this.model.on('change:minimized', function (item) {
                     if (item.get('minimized')) {

css/converse.css

@@ -1769,6 +1769,8 @@
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-group {
     margin: 0 1em;
+    width: 100%;
+    padding-right: 2em;
     /* (jQ addClass:) if input has value: */
     /* (jQ addClass:) if mouse is over the 'x' input area*/ }
     #conversejs #converse-roster .roster-filter-group .roster-filter {

sass/_roster.scss

@@ -23,6 +23,8 @@
 
     .roster-filter-group {
         margin: 0 1em;
+        width: 100%;
+        padding-right: 1em + 2*$chat-gutter;
         .roster-filter {
             float: left;
             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;

src/templates/chatbox.html

-<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
+<div class="flyout box-flyout">
     <div class="dragresize dragresize-top"></div>
     <div class="dragresize dragresize-topleft"></div>
     <div class="dragresize dragresize-left"></div>

src/templates/chatroom.html

-<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
+<div class="flyout box-flyout">
     <div class="dragresize dragresize-top"></div>
     <div class="dragresize dragresize-topleft"></div>
     <div class="dragresize dragresize-left"></div>

src/templates/controlbox.html

-<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
+<div class="flyout box-flyout">
     <div class="dragresize dragresize-top"></div>
     <div class="dragresize dragresize-topleft"></div>
     <div class="dragresize dragresize-left"></div>