From ec71e6b23f51b58ad56c6129ecd8ba22046569e2 Mon Sep 17 00:00:00 2001 From: ghostiee-11 <168410465+ghostiee-11@users.noreply.github.com> Date: Sat, 21 Mar 2026 02:10:55 +0530 Subject: [PATCH 1/3] Fix editing message background fill not stretching with more lines (#603) Add CSS :has() rule to force Paper width to 100% when edit area is active, and configure ChatAreaInput with sizing_mode, disabled upload, and placeholder. --- src/panel_material_ui/chat/ChatMessage.jsx | 15 +++++++++++++-- src/panel_material_ui/chat/message.py | 12 +++++++++--- tests/chat/test_message_edit.py | 12 ++++++++++++ 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/panel_material_ui/chat/ChatMessage.jsx b/src/panel_material_ui/chat/ChatMessage.jsx index 8181fd29..5076f779 100644 --- a/src/panel_material_ui/chat/ChatMessage.jsx +++ b/src/panel_material_ui/chat/ChatMessage.jsx @@ -123,6 +123,17 @@ export function render({model, view}) { const paperRef = React.useRef(null); + // Detect when the edit area is swapped into the Paper and stretch width accordingly. + const [isEditing, setIsEditing] = React.useState(false) + React.useEffect(() => { + if (!paperRef.current) { return } + const observer = new MutationObserver(() => { + setIsEditing(!!paperRef.current?.querySelector(".edit-area")) + }) + observer.observe(paperRef.current, {childList: true, subtree: true}) + return () => observer.disconnect() + }, []) + // Find and cache the scrollable feed ancestor once on mount. // Walk up from view.el, crossing shadow DOM boundaries via getRootNode().host. const scrollContainerRef = React.useRef(null); @@ -203,10 +214,10 @@ export function render({model, view}) { {header} - + {object} - + {show_edit_icon && { model.send_msg("edit") }}> } diff --git a/src/panel_material_ui/chat/message.py b/src/panel_material_ui/chat/message.py index f8b4885d..bd586d28 100644 --- a/src/panel_material_ui/chat/message.py +++ b/src/panel_material_ui/chat/message.py @@ -23,6 +23,7 @@ from .input import ChatAreaInput _MESSAGE_STYLESHEET = ":host(.message), .message { background-color: unset !important; box-shadow: unset !important; font-size: 1.1em; padding-inline: 8px; }" +_EDIT_STRETCH_STYLESHEET = ".MuiPaper-root:has(.edit-area) { width: 100% !important; }" DEFAULT_AVATARS = { "system": {"type": "icon", "icon": "settings"}, @@ -186,7 +187,9 @@ def _build_layout(self): ) self._edit_area = ChatAreaInput( css_classes=["edit-area"], - stylesheets=self._stylesheets + self.param.stylesheets.rx() + stylesheets=self._stylesheets + self.param.stylesheets.rx(), + sizing_mode='stretch_width', + placeholder="Edit message...", ) self.param.watch(self._update_object_pane, "object") self.param.watch(self._update_reaction_icons, "reaction_icons") @@ -214,8 +217,11 @@ def _include_styles(self, obj): def _process_param_change(self, params): params = super()._process_param_change(params) - if 'stylesheets' in params and _MESSAGE_STYLESHEET not in params['stylesheets']: - params['stylesheets'] += [_MESSAGE_STYLESHEET] + if 'stylesheets' in params: + if _MESSAGE_STYLESHEET not in params['stylesheets']: + params['stylesheets'] += [_MESSAGE_STYLESHEET] + if _EDIT_STRETCH_STYLESHEET not in params['stylesheets']: + params['stylesheets'] += [_EDIT_STRETCH_STYLESHEET] return params __all__ = ["ChatMessage"] diff --git a/tests/chat/test_message_edit.py b/tests/chat/test_message_edit.py index 9c41e6f5..80724835 100644 --- a/tests/chat/test_message_edit.py +++ b/tests/chat/test_message_edit.py @@ -73,3 +73,15 @@ def test_edit_area_is_chat_area_input(): """The edit area should be a ChatAreaInput instance.""" msg = ChatMessage(object="Hello") assert isinstance(msg._edit_area, ChatAreaInput) + + +def test_edit_area_has_stretch_width(): + """The edit area should have sizing_mode='stretch_width' so background stretches.""" + msg = ChatMessage(object="Hello") + assert msg._edit_area.sizing_mode == 'stretch_width' + + +def test_edit_area_has_edit_css_class(): + """The edit area should have 'edit-area' CSS class for Paper width detection.""" + msg = ChatMessage(object="Hello") + assert 'edit-area' in msg._edit_area.css_classes From 6eb887db002ade3b823f3e90c436b07104c68710 Mon Sep 17 00:00:00 2001 From: ghostiee-11 <168410465+ghostiee-11@users.noreply.github.com> Date: Tue, 24 Mar 2026 13:07:00 +0530 Subject: [PATCH 2/3] Combine message and edit-stretch stylesheets into one constant Merges _EDIT_STRETCH_STYLESHEET into _MESSAGE_STYLESHEET and simplifies _process_param_change back to a single check. --- src/panel_material_ui/chat/message.py | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/panel_material_ui/chat/message.py b/src/panel_material_ui/chat/message.py index bd586d28..57739b2a 100644 --- a/src/panel_material_ui/chat/message.py +++ b/src/panel_material_ui/chat/message.py @@ -22,8 +22,10 @@ from ..base import MaterialComponent from .input import ChatAreaInput -_MESSAGE_STYLESHEET = ":host(.message), .message { background-color: unset !important; box-shadow: unset !important; font-size: 1.1em; padding-inline: 8px; }" -_EDIT_STRETCH_STYLESHEET = ".MuiPaper-root:has(.edit-area) { width: 100% !important; }" +_MESSAGE_STYLESHEET = ( + ":host(.message), .message { background-color: unset !important; box-shadow: unset !important; font-size: 1.1em; padding-inline: 8px; }" + " .MuiPaper-root:has(.edit-area) { width: 100% !important; }" +) DEFAULT_AVATARS = { "system": {"type": "icon", "icon": "settings"}, @@ -217,11 +219,8 @@ def _include_styles(self, obj): def _process_param_change(self, params): params = super()._process_param_change(params) - if 'stylesheets' in params: - if _MESSAGE_STYLESHEET not in params['stylesheets']: - params['stylesheets'] += [_MESSAGE_STYLESHEET] - if _EDIT_STRETCH_STYLESHEET not in params['stylesheets']: - params['stylesheets'] += [_EDIT_STRETCH_STYLESHEET] + if 'stylesheets' in params and _MESSAGE_STYLESHEET not in params['stylesheets']: + params['stylesheets'] += [_MESSAGE_STYLESHEET] return params __all__ = ["ChatMessage"] From e8cfdc1e4557c95dfc52b901f1cd72bc67e56d86 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Tue, 7 Apr 2026 14:41:37 +0200 Subject: [PATCH 3/3] Override panel edit-area CSS height --- src/panel_material_ui/chat/message.py | 1 + 1 file changed, 1 insertion(+) diff --git a/src/panel_material_ui/chat/message.py b/src/panel_material_ui/chat/message.py index 57739b2a..e8047c62 100644 --- a/src/panel_material_ui/chat/message.py +++ b/src/panel_material_ui/chat/message.py @@ -25,6 +25,7 @@ _MESSAGE_STYLESHEET = ( ":host(.message), .message { background-color: unset !important; box-shadow: unset !important; font-size: 1.1em; padding-inline: 8px; }" " .MuiPaper-root:has(.edit-area) { width: 100% !important; }" + ".edit-area { height: unset; }" ) DEFAULT_AVATARS = {