Fix editing message background fill not stretching with more lines

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}) {
         <Stack direction="row" spacing={0}>
           {header}
         </Stack>
-        <Paper ref={paperRef} elevation={elevation} sx={{bgcolor: "background.paper", width: isResponsive ? "100%" : "fit-content"}}>
+        <Paper ref={paperRef} elevation={elevation} sx={{bgcolor: "background.paper", width: (isResponsive || isEditing) ? "100%" : "fit-content"}}>
           {object}
         </Paper>
-        <Stack direction="row" spacing={0}>
+        <Stack direction="row" spacing={0} sx={{position: "relative", zIndex: 1}}>
           {show_edit_icon && <IconButton disableRipple size="small" sx={{padding: "0 0.1em"}} onClick={() => { model.send_msg("edit") }}>
             <EditNoteIcon sx={{width: "0.8em"}} color="lightgray"/>
           </IconButton>}

src/panel_material_ui/chat/message.py

@@ -22,7 +22,11 @@
 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; }"
+_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 = {
     "system": {"type": "icon", "icon": "settings"},
@@ -186,7 +190,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")

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