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

Phone:Show

Email:Show

Location: Melbourne, Australia

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"The [login to view URL] 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 [login to view URL] block text sometimes shifts too far left or right depending on injected [login to view URL] 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 [login to view URL] 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 [login to view URL] 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.

[login to view URL] runtime styles should not override these layout rules.

Environment

App: Nuvpad (Cloudflare Pages, custom [login to view URL] integration)

Browser: Chrome (latest)

Editor: [login to view URL] 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 [login to view URL] injected inline styles (style="margin-left", transform, etc.) that override alignment.

Consider forcing alignment via !important patch after [login to view URL] 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.


---" (client-provided description)