Issue summary

When a user manually drags the Mercury sidebar wider (or narrower) than the configured defaultWidth, then clicks any Layout Paragraphs component
on the canvas to edit it, the sidebar snaps back to its default width and the user's chosen width is lost. Repeats on every subsequent component click.

Steps to reproduce

  1. Install Mercury Editor 3.0.0-alpha15 on Drupal 11.
  2. Create or edit a page that uses Mercury Editor with at least one Layout Paragraphs component.
  3. Drag the sidebar's resize button to a width clearly different from defaultWidth (e.g. wider).
  4. Click any LP component in the canvas to open its edit dialog.

Expected: the sidebar remains at the width the user dragged it to.

Actual: the sidebar snaps back to defaultWidth (the canvas widens to fill the gap).

Cause

Two code paths overwrite --me-dialog-dock-right-width on every dialog open:

  1. _onDock in dialog.element.js runs unconditionally inside show()/showModal() for any docked dialog
    (dialog.element.js:170-179). It calls setProperty(--me-dialog-dock-${direction}-width, this.width). Because each component-edit click
    instantiates a fresh <mercury-dialog> element, this.width is always the element's default value — never reflecting the user's
    drag.
  2. applyOptions in dialog.drupal.js runs from init() just before show(). Its
    if (dialogWidth)
      {...}

    block (dialog.drupal.js:200-205) unconditionally writes getCSSLength(dialogWidth) to the same CSS var.

The existing guard for defaultWidth (dialog.drupal.js:189-198, if (!getPropertyValue(...))) shows the project's
preferred preservation pattern. This issue extends the same intent to dialogWidth and _onDock.

Note: this is adjacent to but distinct from #3489991 (entity-browser modal resizes
the tray). The fix in #3489991 prevents defaultWidth from re-applying, but the dialogWidth and _onDock paths were
untouched.

Proposed fix

Track the user's manually-resized width in a dedicated localStorage key (mercury-dialog-dock-user-width) written
only from _onDragMouseMove cases E and W — i.e. only when the user actually drags. The existing
mercury-dialog-dock-width key is unsuitable because mercury:dockResize (driven by ResizeObserver) writes to it on
programmatic mounts too. Both _onDock and applyOptions then prefer the user-set value over the element default /
dialogWidth.

A > 10 floor matches the existing 10px collapsed-threshold convention.

Patch attached. Touches:

  • build/js/dialog.element.js: write user-width in resize-drag, prefer user-width in _onDock.
  • build/js/dialog.drupal.js: prefer user-width in applyOptions.
  • source/js/dialog.drupal.js: same as build, so a future rollup rebuild keeps the fix.

build/js/dialog.element.min.js will need regenerating via the project's build pipeline.

A Cypress test demonstrating the regression is included in a follow-up comment.

Affected versions

3.0.0-alpha15 confirmed; cause is structural in 3.x and almost certainly affects all 3.0 alphas. Not present in 2.x as the _onDock path is
different.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

versantus.nik created an issue.

versantus.nik’s picture

Cypress test demonstrating the regression is included in the attached patch at tests/cypress/cypress/integration/dock-width-preserved.cy.js.

The test:

  1. Creates a new page and adds a Layout Paragraphs component.
  2. Simulates the end-state of a user manually drag-resizing the dock by writing the new mercury-dialog-dock-user-width key to
    localStorage and setting --me-dialog-dock-right-width on <html>.
  3. Re-opens an existing component's edit dialog by clicking it.
  4. Asserts the CSS variable still equals the user-set width after the new <mercury-dialog> mounts and _onDock +
    applyOptions have run.

Without the patch, step 4 fails because _onDock overwrites the var with this.width (the fresh element default). With the patch, it
preserves the user's drag-set value.

The step-2 shortcut (writing localStorage directly) sidesteps the noise of driving a mousedown/mousemove/mouseup sequence on the resize button inside the
shadow DOM. A more thorough test could exercise the full drag gesture too — happy to add one if you'd prefer.

Spec selectors (Text as the picker option, .lpb-btn--add, [data-uuid]) match the patterns already used in
test.cy.js; adjust to whatever fixture your CI uses if needed.

justin2pin made their first commit to this issue’s fork.