Render floating notes in the canvas margin instead of an invisible sidebar

[adamsilverstein]

Refreshed with Claude's help to point at #83786 as the main PR, now that #79864 is closed.

What?

Render floating Notes as part of the editor canvas surface - overlaying space reserved inside the canvas - rather than inside an "invisible" complementary-area sidebar.

This is a broader, design-intent framing of the problem behind #73917. The fix is now #83786, which moves floating notes into a canvas margin owned by VisualEditor; it is stacked on #83768, which adds the show/hide notes options. Earlier attempts (#77484, #79864) are closed. Where #73917 reports one symptom (notices don't span the full width), this issue captures the underlying goal: notes should live in the margin of the canvas, like margin notes on an essay, matching the original designs.

Why?

Today, floating notes render inside a transparent PluginSidebar. Because the editor layout treats any active sidebar as a layout-occupying column, this indirection produces a cluster of problems and diverges from the intended design:

• Notices are truncated. Editor notices/banners don't span the full editor width (Notices don't span the full width of the editor when there are notes being rendered. #73917).
• Misplaced scrollbar. The canvas scrollbar lands in the middle of the viewport, at the edge of the invisible sidebar, instead of at the editor's edge.
• Can't coexist with the inspector. Only one complementary area can be active, so floating notes and the Settings sidebar can't be open at the same time.
• A sidebar we don't want. The notes already show at the right of the content whether or not the "All notes" sidebar is open, so routing them through a hidden sidebar is an implementation artifact, not a design choice.

The intended treatment - discussed in #77484 and earlier in #66377 (comment) - is to treat notes as part of the canvas surface: reserve an area inside the canvas (e.g. margin on the html element, as in zoom-out mode) and position the note UI over it as an overlay, horizontally aligned with the blocks they annotate. This keeps the canvas (and its background and scrollbar) at full editor width and lets notes coexist with the inspector.

Goal

Notes appear "in the margin" of the canvas, as an overlay on reserved in-canvas space, so that:

• The canvas - and its scrollbar - stay at the full editor content width.
• Editor notices span the full editor width even while notes are visible (Notices don't span the full width of the editor when there are notes being rendered. #73917).
• Full-bleed content (alignfull) never renders under the notes area.
• Floating notes and the Settings sidebar can be open simultaneously.
• The reserved area keeps the canvas background for any theme, with no color detection.
• The transparent-sidebar plumbing (FLOATING_NOTES_SIDEBAR and friends) is retired.
• The "All notes" sidebar remains the notes surface on small viewports and still hides the floating panel while open.

Related

• Fixed by Notes: Move floating notes into a canvas margin #83786 - Notes: Move floating notes into a canvas margin (main PR).
• Stacked on Notes: Add show and hide options for floating notes #83768 - Notes: Add show and hide options for floating notes (closes Add a toolbar control to show and hide notes #79963).
• Superseded: Notes: overlay floating notes on space reserved inside the canvas #79864 (canvas overlay approach), Fix: Notices don't span full width with notes #77484 (POC), Editor: Add notes display modes to the Options menu #76024 (display modes).
• Symptom bug: Notices don't span the full width of the editor when there are notes being rendered. #73917.
• Design discussion: Notes iteration for WordPress 6.9 #66377 (and Notes iteration for WordPress 6.9 #66377 (comment)).

Out of scope

Follow-ups discussed in #77484, tracked separately: the tablet "bubble" mode, mobile per-note markers from the Figma designs, and in-canvas notices (#79010).