UX: improves support of window resize in chat (#24115)

- correctly respects min-width/height defined in css
- removes fixed width/height when resizing window
- reduces the min width of the side panel from 250px to 150px

plugins/chat/assets/javascripts/discourse/components/chat-side-panel.hbs

@@ -5,7 +5,7 @@
     {{chat/resizable-node
       ".chat-side-panel-resizer"
       this.didResize
-      (hash position=false vertical=false mutate=false)
+      (hash position=false vertical=false mutate=false resetOnWindowResize=true)
     }}
     style={{if
       (and this.site.desktopView this.chatStateManager.isFullPageActive)

plugins/chat/assets/javascripts/discourse/modifiers/chat/resizable-node.js

@@ -1,4 +1,5 @@
 import { registerDestructor } from "@ember/destroyable";
+import { cancel, throttle } from "@ember/runloop";
 import Modifier from "ember-modifier";
 import { bind } from "discourse-common/utils/decorators";
 
@@ -27,7 +28,13 @@ export default class ResizableNode extends Modifier {
     this.element = element;
     this.didResizeContainer = didResizeContainer;
     this.options = Object.assign(
-      { vertical: true, horizontal: true, position: true, mutate: true },
+      {
+        vertical: true,
+        horizontal: true,
+        position: true,
+        mutate: true,
+        resetOnWindowResize: false,
+      },
       options
     );
 
@@ -37,6 +44,8 @@ export default class ResizableNode extends Modifier {
     this.element
       .querySelector(this.resizerSelector)
       ?.addEventListener("mousedown", this._startResize);
+
+    window.addEventListener("resize", this._resizeWindow);
   }
 
   cleanup() {
@@ -46,12 +55,27 @@ export default class ResizableNode extends Modifier {
     this.element
       .querySelector(this.resizerSelector)
       ?.removeEventListener("mousedown", this._startResize);
+
+    window.removeEventListener("resize", this._resizeWindow);
+    cancel(this._throttledResizeHandler);
   }
 
   @bind
   _startResize(event) {
     event.preventDefault();
 
+    this._minimumWidth = parseFloat(
+      getComputedStyle(this.element, null)
+        .getPropertyValue("min-width")
+        .replace("px", "") || MINIMUM_SIZE
+    );
+
+    this._minimumHeight = parseFloat(
+      getComputedStyle(this.element, null)
+        .getPropertyValue("min-height")
+        .replace("px", "") || MINIMUM_SIZE
+    );
+
     this._originalWidth = parseFloat(
       getComputedStyle(this.element, null)
         .getPropertyValue("width")
@@ -106,8 +130,7 @@ export default class ResizableNode extends Modifier {
     );
 
     const newStyle = {};
-
-    if (this.options.horizontal && width > MINIMUM_SIZE) {
+    if (this.options.horizontal && width >= this._minimumWidth) {
       newStyle.width = width + "px";
 
       if (this.options.position) {
@@ -120,7 +143,7 @@ export default class ResizableNode extends Modifier {
       }
     }
 
-    if (this.options.vertical && height > MINIMUM_SIZE) {
+    if (this.options.vertical && height >= this._minimumHeight) {
       newStyle.height = height + "px";
 
       if (this.options.position) {
@@ -137,7 +160,31 @@ export default class ResizableNode extends Modifier {
       Object.assign(this.element.style, newStyle);
     }
 
-    this.didResizeContainer?.(this.element, { width, height });
+    this.didResizeContainer?.(this.element, {
+      width: width >= this._minimumWidth ? width : this._minimumWidth,
+      height: height >= this._minimumHeight ? height : this._minimumHeight,
+    });
+  }
+
+  @bind
+  _resizeWindow() {
+    if (!this.options.resetOnWindowResize) {
+      return;
+    }
+
+    this._throttledResizeHandler = throttle(this, this._throttledResize, 100);
+  }
+
+  @bind
+  _throttledResize() {
+    const style = {};
+    if (this.options.vertical) {
+      style.height = "auto";
+    }
+    if (this.options.horizontal) {
+      style.width = "auto";
+    }
+    Object.assign(this.element.style, style);
   }
 
   @bind

plugins/chat/assets/stylesheets/common/chat-side-panel.scss

@@ -11,7 +11,7 @@
   box-sizing: border-box;
   border-left: 1px solid var(--primary-low);
   position: relative;
-  min-width: 250px;
+  min-width: 150px;
 
   &__list {
     flex-grow: 1;