github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-29 21:44:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: correctly reset panel when resizing window (#32437)

Browse Source 
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)
This commit is contained in:
Joffrey JAFFEUX 2025-04-24 12:31:55 +02:00 committed by GitHub
parent 199d7fb074
commit ed2740d0ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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