Javadcript Editor.js toolbar and text misalignment with title underline in Nuvpad

The Editor.js block content and toolbar rail are not consistently aligned with the pad title underline.

The title underline is centered to the main text column (--col-actual).

The Editor.js block text sometimes shifts too far left or right depending on injected Editor.js inline styles.

The toolbar actions rail (:: +) does not line up correctly with the start of the text content. In some cases, it floats inside the content column; in others, it is offset too far outward.

Attempts to fix this via CSS (padding-left, --content-inset-left, post-boot patches with !important) have partially worked, but alignment breaks after Editor.js injects its own styles at runtime.

This results in:

Title underline and first paragraph text not visually aligned.

Toolbar (⋮ +) not anchored consistently in the left gutter.

Different misalignments across reloads and breakpoints, likely due to Editor.js reapplying transform or inline width styles after initialization.



---

Steps to Reproduce

1. Open a new pad (/p/:id) in Nuvpad.


2. Enter a title and then type one or two paragraphs.


3. Observe:

Paragraph text does not align perfectly under the title underline.

Toolbar rail floats inconsistently relative to text and title.





---

Expected Behavior

Title underline, first paragraph text, and subsequent block text should align on the same vertical line.

Toolbar (⋮ +) should sit consistently in the reserved left gutter, outside the content column.

Editor.js runtime styles should not override these layout rules.

Environment

App: Nuvpad (Cloudflare Pages, custom Editor.js integration)

Browser: Chrome (latest)

Editor: Editor.js with List, Header, Quote, Code, etc.

CSS: Custom variables (--col-actual, --content-inset-left, --toolbar-w, --toolbar-gap) + injected post-boot CSS



---

Notes for Fix

Investigate Editor.js injected inline styles (style="margin-left", transform, etc.) that override alignment.

Consider forcing alignment via !important patch after Editor.js injects its DOM (using a MutationObserver or onReady hook).

Sync the left inset for both:

.ce-block__content { padding-left: … }

.ce-toolbar__actions { left: … }


The goal: one single source of truth (--content-inset-left) for both underline and block text alignment.


---