From 6c3a7f2a674253681ef419df02c8d15d71ecab83 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 16 Jan 2025 16:03:35 +0100 Subject: [PATCH] FIX: do not store 0 has min width for thead panel (#30818) When we had no width stored for the side panel in the local storage, essentially the computation would end up being: ```javascript Math.min(null, 1000); ``` Which would output: 0. This commit ensures we have a default for store width: MIN_PANEL_WIDTH. And also uses the same value in CSS and JS. I had to change z-layers of chat-side-panel resizer as it was interfering with system specs changing the notification level of a thread, when trying to click the option in the dropdown, it would instead click the resizer as it would appear on top of the dropdown. Tried to write a test but couldn't get something reliable. --- .../assets/javascripts/discourse/components/chat-side-panel.gjs | 2 +- plugins/chat/assets/stylesheets/common/chat-navbar.scss | 1 - .../chat/assets/stylesheets/common/chat-side-panel-resizer.scss | 2 +- plugins/chat/assets/stylesheets/desktop/chat-side-panel.scss | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-side-panel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-side-panel.gjs index 978fd535a5d..f8478a1bb8e 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-side-panel.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-side-panel.gjs @@ -27,7 +27,7 @@ export default class ChatSidePanel extends Component { } const validWidth = Math.min( - this.store.getObject("width"), + this.store.getObject("width") ?? MIN_PANEL_WIDTH, this.mainContainerWidth - MIN_PANEL_WIDTH ); diff --git a/plugins/chat/assets/stylesheets/common/chat-navbar.scss b/plugins/chat/assets/stylesheets/common/chat-navbar.scss index 7e69ad14752..668bdd66c79 100644 --- a/plugins/chat/assets/stylesheets/common/chat-navbar.scss +++ b/plugins/chat/assets/stylesheets/common/chat-navbar.scss @@ -4,7 +4,6 @@ background: var(--secondary); box-sizing: border-box; display: flex; - z-index: z("composer", "content") - 1; padding: 0 0.67em; &.-clickable { diff --git a/plugins/chat/assets/stylesheets/common/chat-side-panel-resizer.scss b/plugins/chat/assets/stylesheets/common/chat-side-panel-resizer.scss index f5f6bffd629..f6e3135e0f6 100644 --- a/plugins/chat/assets/stylesheets/common/chat-side-panel-resizer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-side-panel-resizer.scss @@ -2,7 +2,7 @@ top: 0; bottom: 0; position: absolute; - z-index: z("composer", "content") - 1; + z-index: 1; transition: background-color 0.15s 0.15s; background-color: transparent; diff --git a/plugins/chat/assets/stylesheets/desktop/chat-side-panel.scss b/plugins/chat/assets/stylesheets/desktop/chat-side-panel.scss index 54fbb98d08d..e8051066232 100644 --- a/plugins/chat/assets/stylesheets/desktop/chat-side-panel.scss +++ b/plugins/chat/assets/stylesheets/desktop/chat-side-panel.scss @@ -9,7 +9,7 @@ box-sizing: border-box; border-left: 1px solid var(--primary-low); position: relative; - min-width: 150px; + min-width: 250px; &__list { flex-grow: 1;