Skip to content

Fix editing message background fill not stretching with more lines#604

Merged
philippjfr merged 4 commits intopanel-extensions:mainfrom
ghostiee-11:fix/edit-message-background-stretch
Apr 7, 2026
Merged

Fix editing message background fill not stretching with more lines#604
philippjfr merged 4 commits intopanel-extensions:mainfrom
ghostiee-11:fix/edit-message-background-stretch

Conversation

@ghostiee-11
Copy link
Copy Markdown
Contributor

@ghostiee-11 ghostiee-11 commented Mar 20, 2026

Fixes #603

Changes

When a user edits a chat message, the Paper background now stretches to full width instead of staying at fit-content.

Root cause

The isResponsive check in ChatMessage.jsx reads sizing_mode from the child model, but this check is not reactive when _object_panel is swapped to the edit area. The Paper stays at fit-content, causing the edit textarea to overflow its background.

Fix

Python (message.py):

  • Set sizing_mode='stretch_width' on the ChatAreaInput edit area
  • Add placeholder="Edit message..." for UX clarity

JSX (ChatMessage.jsx):

  • Add a MutationObserver on the Paper element that detects when the .edit-area CSS class appears in the DOM
  • When editing, set isEditing=true which forces Paper to width: 100%
  • When edit is cancelled/submitted, observer detects removal and reverts to fit-content
  • Add position: relative; z-index: 1 on the edit/copy icon Stack to prevent overlap from next message

Tests (test_message_edit.py):

  • Add test_edit_area_has_stretch_width - verifies sizing_mode='stretch_width'
  • Add test_edit_area_has_edit_css_class - verifies edit-area CSS class presence (required for MutationObserver detection)

Screenshot

After

Edit area stretches to full width with clean underline styling. All text contained within the Paper background.

…anel-extensions#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.
@ghostiee-11 ghostiee-11 force-pushed the fix/edit-message-background-stretch branch from b3772ce to ec71e6b Compare March 20, 2026 21:34
@codecov
Copy link
Copy Markdown

codecov bot commented Mar 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.66%. Comparing base (647425f) to head (428e322).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #604      +/-   ##
==========================================
- Coverage   82.03%   81.66%   -0.38%     
==========================================
  Files          31       31              
  Lines        3229     3229              
==========================================
- Hits         2649     2637      -12     
- Misses        580      592      +12     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ghostiee-11 ghostiee-11 marked this pull request as ready for review March 22, 2026 08:15
@ghostiee-11 ghostiee-11 requested a review from philippjfr as a code owner March 22, 2026 08:15
Comment thread src/panel_material_ui/chat/message.py Outdated
Merges _EDIT_STRETCH_STYLESHEET into _MESSAGE_STYLESHEET and
simplifies _process_param_change back to a single check.
@ahuang11
Copy link
Copy Markdown
Contributor

I can't get it working after pixi run compile-dev and clearing cache and restarting browser. Were you able to get it to work?

image

@philippjfr
Copy link
Copy Markdown
Contributor

Definitely still overflows. Will investigate and push to this PR to fix.

Screenshot 2026-04-07 at 14 38 27

@philippjfr philippjfr merged commit f32330a into panel-extensions:main Apr 7, 2026
18 of 21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Editing message background fill doesn't stretch with more lines

3 participants