Add new option `dragresize_top_margin`.

docs/source/configuration.rst

@@ -750,27 +750,6 @@ a chat state indication of ``active`` will be sent out.
 
 A value of ``0`` means that this feature is disabled.
 
-.. _`lazy_load_vcards`:
-
-lazy_load_vcards
-----------------
-
-* Default:  ``true``
-
-Determines whether vCards are fetched lazily, i.e. only when their data should
-be shown in the UI, or eagerly, which is immediately once the entity the vCard
-relates to is known.
-
-.. _`loglevel`:
-
-loglevel
---------
-
-* Default:  ``'info'``
-* Allowed values: ``'debug'``, ``'info'``, ``'warn'``, ``'error'``, ``'fatal'``
-
-You can also set this value by changing a URL fragment `#converse?loglevel=debug`
-
 .. _`dark_theme`:
 
 dark_theme
@@ -815,6 +794,17 @@ domain_placeholder
 
 The placeholder text shown in the domain input on the registration form.
 
+dragresize_top_margin
+---------------------
+
+* Default: ``0``
+
+A number, in pixels, which is a top margin that a chat box cannot be resized
+beyond. For example, if it's set to ``100``, then a chat box cannot be resized
+beyond ``100px`` from the top of the window.
+Only relevant when ``view_mode`` is set to ``'overlayed'``.
+
+
 embed_3rd_party_media_players
 -----------------------------
 
@@ -980,6 +970,27 @@ geouri_replacement
 String used to replace geo-URIs with. Ought to be a link to osm or similar. ``$1`` and ``$2`` is replaced by
 latitude and longitude respectively.
 
+.. _`lazy_load_vcards`:
+
+lazy_load_vcards
+----------------
+
+* Default:  ``true``
+
+Determines whether vCards are fetched lazily, i.e. only when their data should
+be shown in the UI, or eagerly, which is immediately once the entity the vCard
+relates to is known.
+
+.. _`loglevel`:
+
+loglevel
+--------
+
+* Default:  ``'info'``
+* Allowed values: ``'debug'``, ``'info'``, ``'warn'``, ``'error'``, ``'fatal'``
+
+You can also set this value by changing a URL fragment `#converse?loglevel=debug`
+
 hide_muc_participants
 ---------------------
 

src/plugins/dragresize/index.js

@@ -24,7 +24,8 @@ converse.plugins.add('converse-dragresize', {
          * loaded by converse.js's plugin machinery.
          */
         api.settings.extend({
-            'allow_dragresize': true,
+            allow_dragresize: true,
+            dragresize_top_margin: 0,
         });
 
         Object.assign(_converse.exports.ChatView?.prototype ?? {}, DragResizableMixin);

src/plugins/dragresize/mixin.js

@@ -3,7 +3,7 @@ import { api } from '@converse/headless';
 import { applyDragResistance, getResizingDirection } from './utils.js';
 
 const DragResizableMixin = {
-    initDragResize () {
+    initDragResize() {
         const debouncedSetDimensions = debounce(() => this.setDimensions());
         window.addEventListener('resize', debouncedSetDimensions);
         this.listenTo(this.model, 'destroy', () => window.removeEventListener('resize', debouncedSetDimensions));
@@ -35,15 +35,29 @@ const DragResizableMixin = {
         return this;
     },
 
-    resizeChatBox (ev) {
+    /**
+     * @param {MouseEvent} ev
+     */
+    resizeChatBox(ev) {
         let diff;
         const direction = getResizingDirection();
         if (direction.indexOf('top') === 0) {
+            const margin = api.settings.get('dragresize_top_margin') ?? 0;
+            const max_height = window.innerHeight - margin;
             diff = ev.pageY - this.prev_pageY;
+
             if (diff) {
+
+                const new_height = this.height - diff;
+                console.log('------------');
+                console.log(`window.innerHeight: ${window.innerHeight}`);
+                console.log(`max_height: ${max_height}`);
+                console.log(`new_height: ${new_height}`);
+                console.log(`diff: ${diff}`);
+
                 this.height =
                     this.height - diff > (this.model.get('min_height') || 0)
-                        ? this.height - diff
+                        ? (new_height <= max_height ? new_height : max_height)
                         : this.model.get('min_height');
                 this.prev_pageY = ev.pageY;
                 this.setChatBoxHeight(this.height);
@@ -62,7 +76,7 @@ const DragResizableMixin = {
         }
     },
 
-    setDimensions () {
+    setDimensions() {
         // Make sure the chat box has the right height and width.
         this.adjustToViewport();
         this.setChatBoxWidth(this.model.get('width'));
@@ -71,32 +85,28 @@ const DragResizableMixin = {
         }
     },
 
-    setChatBoxHeight (height) {
-        if (height) {
-            height = applyDragResistance(height, this.model.get('default_height')) + 'px';
-        } else {
-            height = '';
-        }
+    /**
+     * @param {number} height
+     */
+    setChatBoxHeight(height) {
         const flyout_el = this.querySelector('.box-flyout');
         if (flyout_el !== null) {
-            flyout_el.style.height = height;
+            flyout_el.style.height = height ? applyDragResistance(height, this.model.get('default_height')) + 'px' : '';
         }
     },
 
-    setChatBoxWidth (width) {
-        if (width) {
-            width = applyDragResistance(width, this.model.get('default_width')) + 'px';
-        } else {
-            width = '';
-        }
-        this.style.width = width;
+    /**
+     * @param {number} width
+     */
+    setChatBoxWidth(width) {
+        this.style.width = width ? applyDragResistance(width, this.model.get('default_width')) + 'px' : '';
         const flyout_el = this.querySelector('.box-flyout');
         if (flyout_el !== null) {
             flyout_el.style.width = width;
         }
     },
 
-    adjustToViewport () {
+    adjustToViewport() {
         /* Event handler called when viewport gets resized. We remove
          * custom width/height from chat boxes.
          */
@@ -110,7 +120,7 @@ const DragResizableMixin = {
         } else if (viewport_height <= this.model.get('height')) {
             this.model.set('height', undefined);
         }
-    }
+    },
 };
 
 export default DragResizableMixin;

src/plugins/dragresize/utils.js

@@ -82,6 +82,7 @@ export function onStartVerticalResize(ev, trigger = true) {
     resizing.chatbox = chatbox_el;
     resizing.direction = 'top';
     chatbox_el.prev_pageY = ev.pageY;
+
     if (trigger) {
         /**
          * Triggered once the user starts to vertically resize a {@link _converse.ChatBoxView}