From ed2740d0ca4b1c2d429be0c4297dfefec31bbcea Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 24 Apr 2025 12:31:55 +0200
Subject: [PATCH] FIX: correctly reset panel when resizing window (#32437)

The problem is mainly that we also have a css animation made from js
which was setting a different width for the panel, so the `style.width =
"auto"` was not overriding this part. This animation happens in a parent
component after `didResizeContainer` is called, so it could be fine most
of the times, but the simpler change is to ensure, panel resize, or
window resize ends up in the same codepath so whatever the developer
decides to do in `didResizeContainer` hook will be applied in both
cases.

No test as it's fairly hard to test and would require a complex system
spec setup.

It avoids this situation where the side panel is larger than viewport
after window resize:
![Screenshot 2025-04-24 at 11 58
09](https://github.com/user-attachments/assets/8b58793a-32dc-4bc8-9989-7498e458c059)
---
 .../modifiers/chat/resizable-node.js          | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/modifiers/chat/resizable-node.js b/plugins/chat/assets/javascripts/discourse/modifiers/chat/resizable-node.js
index 9aa45940e16..13f299373ff 100644
--- a/plugins/chat/assets/javascripts/discourse/modifiers/chat/resizable-node.js
+++ b/plugins/chat/assets/javascripts/discourse/modifiers/chat/resizable-node.js
@@ -160,31 +160,28 @@ export default class ResizableNode extends Modifier {
       Object.assign(this.element.style, newStyle);
     }
 
-    this.didResizeContainer?.(this.element, {
-      width: width >= this._minimumWidth ? width : this._minimumWidth,
-      height: height >= this._minimumHeight ? height : this._minimumHeight,
-    });
+    const containerStyle = {};
+    const containerWidth =
+      width >= this._minimumWidth ? width : this._minimumWidth;
+    if (containerWidth) {
+      containerStyle.width = containerWidth;
+    }
+    const containerHeight =
+      height >= this._minimumHeight ? height : this._minimumHeight;
+    if (containerHeight) {
+      containerStyle.height = containerHeight;
+    }
+
+    this.didResizeContainer?.(this.element, containerStyle);
   }
 
   @bind
-  _resizeWindow() {
+  _resizeWindow(event) {
     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);
+    this._throttledResizeHandler = throttle(this, this._resize, event, 100);
   }
 
   @bind