Isolate lexxy-editor style and layout with CSS containment

[jorgemanrubia]

Summary

Adds contain: layout style to lexxy-editor so the editor's style and layout are isolated from its surroundings.

Why

Editor initialization mutates many descendants (adapter nodes, toolbar, content root) in sequence. Without containment, each mutation invalidates ancestor-dependent selectors (:has(), inherited custom properties, descendant combinators) across the whole document, so every style recalc walks the entire document tree.

On a Basecamp chat page with ~13,500 DOM elements, Chrome traces show each editor init firing three style recalcs that each re-examine all ~13,500 elements. With two editors on the page that's six 50ms recalcs during initial render — plus all the post-init recalcs triggered by typing, selection changes, and so on.

Measurement

Same page, same number of editors, same content.

Before: UpdateLayoutTree events touching 13,488 elements each, ~50ms per recalc. Total ~593ms across init.
After: UpdateLayoutTree events touching 6,913 elements each, ~28–35ms per recalc. Total ~365ms across init.

That's a ~38% drop in total style recalc time and ~48% fewer elements re-evaluated per event.

Safety

contain: layout style means:

• The editor's layout computation is independent of its siblings — internal size/position changes never trigger layout outside the editor.
• Style invalidation doesn't cross the boundary in either direction.

Does not prevent paint or size containment. The editor still paints normally and its intrinsic size still participates in the page layout. Selection, focus, and cursor positioning all continue to work across the boundary (they're browser-native and unaffected by contain: layout style).

[Copilot]

Pull request overview

Adds CSS containment to lexxy-editor to reduce whole-page style/layout invalidation caused by editor initialization mutating many descendants, improving performance on large DOM pages.

Changes:

• Add contain: layout style to the lexxy-editor root to isolate internal layout/style recalculation from the rest of the document.
• Document the rationale and expected impact directly in the stylesheet comment.

Tip

If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.